css not working on :hover - html

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>
<img src="'.$image.'" width="250px" height="200px" />
<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>