WordPress.org

Ready to get started?Download WordPress

Forums

Animated scaling background (5 posts)

  1. bmorris110
    Member
    Posted 2 years ago #

    http://fugostudios.com/work/

    How can I make the roll over images fade in/out with css, not jquery or js?

    I tried http://jqueryfordesigners.com/image-cross-fade-transition/
    But the grid won't line up.

  2. Kurt
    Member
    Posted 2 years ago #

    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.

  3. bmorris110
    Member
    Posted 2 years ago #

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

  4. Kurt
    Member
    Posted 2 years ago #

    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="http://www.youtube.com/watch?v=tSAS8pRJ8nw" class="fancybox-youtube">
    <img width="270" height="152" src="  http://www.fugostudios.com/wp-content/themes/FUGOstudios/images/thumbsSML/thumbSML_reel2.jpg"  />
    </a>
    
    </div>
    
    CSS:
    
    .portfolio-box1 {
    	background: url(http://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.

  5. bmorris110
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic