Animated scaling background

bmorris110:

Do it backwards is the answer.

Set your current rollover effect (the 2012 Show Reel image) to be the image for the first box in the grid. Set the normal state of this image to opacity: 0; . By doing this it doesn’t display. Set the hover effect for this image/link to opacity: 1; (or whatever opacity works for you). When the mouse hovers, the image appears.

Next set the background image to the Fugo Studios image for the first box. It appears unless the mouse is hovering. When the mouse hovers over the first box, the 2012 Show Reel image is on top.

but when I try to make a grid, there is the problem. do i need to make a div tag for each thumb pair?

There already is a div for each image. You’ll need to make each “a” tag unique so you can apply a different hover effect to each. Without trying it, I think this will work:

HTML:

<div class="container">

<a class="portfolio-box1" href="https://www.youtube.com/watch?v=tSAS8pRJ8nw" class="fancybox-youtube">
<img width="270" height="152" src="  https://www.fugostudios.com/wp-content/themes/FUGOstudios/images/thumbsSML/thumbSML_reel2.jpg"  />
</a>

</div>

CSS:

.portfolio-box1 {
	background: url(https://www.fugostudios.com/wp-content/themes/FUGOstudios/images/thumbsSML/thumbSML_reel.jpg) no-repeat scroll 0 0 transparent;
}

.portfolio-box1 img {
	opacity: 0;
}

.portfolio-box1 img:hover {
	opacity: 1;
}

You’ll need to add a class like portfolio-box1 to each “a” tag and then add CSS to apply a different background image to each.

i was hoping i wouldnt have to make a div for each thumb, but o well. will try soon thanks.