How can I hover image on top of another

Discussion in 'CSS' started by macaela, Apr 10, 2013.

0
  1. #1
    How can I add image on top of the other I cant make the list image as background as it generic by php I just want to add a play button on top of the images when hover

    <ul id="list_profile">
    <li class="">
        <a href="#/"><img width="440" height="450" alt="img4" src="/uploads/img4.jpg"></a>
    </li>
   
    <li class="">
        <a href="#/"><img width="440" height="450" alt="img3" src="/uploads/img3.jpg"></a>
    </li>
</ul>
    HTML:
    CSS
    #list_profile li img { width:212px; height:222px; margin-bottom:10px; z-index:-1;}
 
#list_profile li img:hover {
    background: url("/images/galleryhover.png") no-repeat scroll left top transparent ;
    height: 222px;
    width: 212px;
    z-index:999;
}
    HTML:
     
    macaela, Apr 10, 2013 IP
  2. Delta9er

    Delta9er Active Member

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #2
    Try something like this:

    Make the first image something like this:
    position: relative;
    top: 0;
    left: 0;

    Second image like this:
    #list_profile li img:hover {
    background: url("/images/galleryhover.png") no-repeat scroll left top transparent ;
    position: absolute;
    top: 30;
    height: 222px;
    width: 212px;
    }
     
    Delta9er, Apr 28, 2013 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    set the hover state background on the A, then for a:hover make the IMG tag be opacity:0;

    Though really given the ridiculous sizes, I'm wondering just what the devil you are doing for images (that may not even belong in the markup in the first place!)... Much less things like resizing the IMG from the CSS when you're stating width and height in the markup; really oddball stuff.
     
    deathshadow, Apr 30, 2013 IP
  4. rohittripathi

    rohittripathi Greenhorn

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    hi Delta has given nice example to do that.
     
    rohittripathi, May 1, 2013 IP
  5. Bharat Bhushan

    Bharat Bhushan Member

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #5
    how i can do external css. pls help
     
    Bharat Bhushan, May 7, 2013 IP
  6. jamjar919

    jamjar919 Well-Known Member

    Messages:
    332
    Likes Received:
    7
    Best Answers:
    5
    Trophy Points:
    180
    #6

    Look online before you ask here. The code would be 


    <link rel="stylesheet" type="text/css" href="linktoyourstylesheet.css">
    HTML:
    Placed inside the <head> tag in your HTML.

     
    jamjar919, May 13, 2013 IP
  7. Bharat Bhushan

    Bharat Bhushan Member

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #7
    ok.we make all changes in .css page and put link on head section through syntax.
     
    Bharat Bhushan, May 14, 2013 IP
  8. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #8

    If you choose to do it this way you really need to have a look at this:
    http://css-tricks.com/snippets/css/cross-browser-opacity/
     
    HuggyStudios, May 14, 2013 IP