Change opacity and add thumbnail on hover using css - html

Question

I would like to change the opacity of the img and add a 50x50 thumbnail for zoom on hover using only CSS no jquery. This is what I have done so far.
HTML code:
<div class="span4">
<a class="zoom-icon" href="#">
<img class="blackout image-1" alt="Elite Sports" src="http://www.domain.com/images/es.jpg" width="300" height="300">
</a>
</div>
CSS code:
.span4 { margin: 35px 50px; border: 5px solid #000; }
.span4:hover { border: 5px solid #ccc; }
.span4 a:hover { background: #000; }
.blackout:hover { opacity: .0; }
I have the black background on hover working but I can't figure out how to make the thumbnail show up over top of the black background "blackout". Any helpful tips would be much appreciated.
UPDATE w/Fiddle:
http://jsfiddle.net/8BMYH/

Answer 1

Something like this
http://jsfiddle.net/8BMYH/14/
HTML
<div class="span4"> <a class="portfolio-link-icon" href="http://www.elitesports.com"><
<img class="alignnone blackout size-full wp-image-2592" alt="Elite Sports" src="http://www.surgicalgeeks.com/wp-content/uploads/2013/04/es.jpg" width="300" height="300" />
<img class="zoom-link" src="http://www.surgicalgeeks.com/wp-content/uploads/2013/04/portfolio-link-icon.png" />
</a>
</div>
CSS
span4 {
background: #000;
margin: 35px 50px;
width: 300px !important;
height: 300px;
border: 5px solid black;
float: left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
box-shadow: 1px 1px 5px #000;
}
.span4:hover {
overflow: hidden;
border: 5px solid #8b8c8d;
border-radius: 25%;
-webkit-transform: rotate(290deg);
-moz-transform: rotate(290deg);
-o-transform: rotate(290deg);
-ms-transform: rotate(290deg);
transform: rotate(290deg);
}
.blackout:hover {
opacity: .0;
}
.zoom-link {
top: 130px;
left: 130px;
position: absolute;
visibility: hidden;
}
.span4:hover .zoom-link {
position: absolute;
visibility: visible;
}
.span4:hover .blackout {
opacity: 0;
}

Answer 2

You can add the thumbnail when you hover over the link using the :after pseudo-element. I created a Pen that demonstrates this: http://codepen.io/Ghodmode/pen/xFmqf
This isn't an ideal solution, but it is entirely CSS. It would be better if I could get the value of the src attribute from the image and use that as the background url using the attr() (http://www.w3.org/TR/css3-values/#attr) CSS function, but I couldn't get that to work.
.span4 a.zoom-icon {
position: relative;
}
.span4 a.zoom-icon:hover:after {
content: "";
display: block;
position: absolute;
width: 50px;
height: 50px;
bottom: 10px;
right: 10px;
background-color: black;
background-image: url("http://bit.ly/XioiVs");
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}