css not working on :hover

Question

first of all, here's a Reference to what I want to do, based my code off that one.

I'm having a bit of trouble using css, I have a php file that returns a table with images:

echo    '<td valign="bottom">
            <div class="profile-image">
                <figure>
                    <a href="#"><img src="'.$image.'" width="250px" height="200px" /></a>
                    <figcaption>'.$nombreAlmno.'<br>'.$semestre.' semestre</figcaption>
               </figure>
               <span class="overlay"></span>
             </div>                                         
     </td>';

It does work, this is what I get:

So my problem is I'm trying to display another image on hover using the <span class="overlay"> which I call on my css file:

.profile-image:hover .overlay {
position:absolute;
width: 800px;
height: 800px;
z-index: 100;
background: transparent url('http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg') no-repeat;
cursor: pointer;
}

I know my css is working (part of it at least) because when I put the cursor over an image, it changes to the pointer cursor, yet the span is not showing at all.

Any tips or tricks would be appreciated.

Answer 1

You need the parent element (the one that the absolute positioning is being set relative to) to have a set position (in this case, position:relative is probably best). Also, be sure to set the top, bottom, left, or right properties to control where the image appears!

http://jsfiddle.net/gztLspL3/4/

HTML:

<table>
<td valign="bottom">
    <div class="profile-image">
        <figure> <a href="#">
                <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" width="250px" height="200px" />
            </a>

            <figcaption>'.$nombreAlmno.'
                <br>'.$semestre.' semestre</figcaption>
        </figure> <span class="overlay"></span>

    </div>
</td>

CSS:

.profile-image {
    position: relative;
}

.profile-image:hover .overlay {
    position: absolute;
    width: 800px;
    height: 800px;
    z-index: 100;
    background: transparent url('http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg') no-repeat;
    cursor: pointer;
    left: 100%;
    top: 0;
}

Also, if you want it to appear directly next to the image: http://jsfiddle.net/gztLspL3/6/

Answer 2

Add jquery like this

$( "div.profile-image>a>img" ).hover(
  function() {
    $( "#bigOne").first().css("display", "block").css("background", "transparent url('" + $(this).prop("src").replace("_s.jpg", ".jpg") + "') no-repeat");
  }, function() {
    $( "#bigOne" ).css("display", "none").css("background", "");
  }
);

and change your css name

#bigOne {
    position:absolute;
    width: 800px;
    height: 800px;
    z-index: 100;
    cursor: pointer;
    display:none;
}

and change <span class="overlay"></span> to <span id="bigOne"></span>

dont forget adding jquery your page

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>