WordPress.org

Ready to get started?Download WordPress

Forums

Display 9 Hovering images in 3 x 3 grid (1 post)

  1. bmorris110
    Member
    Posted 2 years ago #

    http://www.erichaviv.com/work/

    I'm trying to get these images to line up in a 3x3 grid, with 10px padding between images. I can't seem to get this work.

    HTML code:

    <div class="grid">
    
    <!--THUMB 1-->
    <div id="cf">
    	<a href="http://youtu.be/tSAS8pRJ8nw?hd=1"><img class="bottom" src="<?php bloginfo('template_directory'); ?>/images/portfolio_thumbs/thumb2.jpg" />
    	<img class="top" src="<?php bloginfo('template_directory'); ?>/images/portfolio_thumbs/thumb.jpg" /></a>
    </div>	
    
    <!--THUMB 2-->
    <div id="cf">
    	<a href="http://youtu.be/tSAS8pRJ8nw?hd=1"><img class="bottom" src="<?php bloginfo('template_directory'); ?>/images/portfolio_thumbs/thumb2.jpg" />
    	<img class="top" src="<?php bloginfo('template_directory'); ?>/images/portfolio_thumbs/thumb.jpg" /></a>
    </div>

    CSS code:

    #cf {
    	position:relative;
    	height:270px;
    	width:160px;
    	margin:0 auto;
    }
    
    #cf img {
    	position:absolute;
    	left:0;
    	-webkit-transition: opacity 1s ease-in-out;
    	-moz-transition: opacity 1s ease-in-out;
    	-o-transition: opacity 1s ease-in-out;
    	-ms-transition: opacity 1s ease-in-out;
    	transition: opacity 1s ease-in-out;
    }
    
    #cf img.top:hover {
    	opacity:0;
    }			
    
    .grid {
    	float: left;
    }
    
    .grid img {
    	float: left;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic