CSS3 Instance page: Meters Top banner photo wall

Article Introduction: in last week's article mentioned want to do a CSS3 animation effect, because recently has been using the shrimp nets to listen to music, see their home page that flash top banner design good, so the whim of trial CSS3 also produced a similar effect of the photo wall, However, some features are still not supported by CSS, can only be achieved through the script, but the entire animation and the concept of the works are through

In last week's article mentioned want to do a CSS3 animation effect, because recently has been using the shrimp nets to listen to music, see their home page that flash top banner design good, so the whim of trial CSS3 also produced a similar effect of the photo wall, However, some features of the current CSS still can not support, only through the script to achieve, but the entire work of the animation and ideas are done through CSS3, the effect I want to be satisfied, IE8 the following does not support, IE8 part of support, other advanced browsers are no problem, I added the last article in the Demo browser support icon table, together to see the production process.

View Demo

Step1. HTML code

<div id= "Demo" > <div class= "col" > <div class= "Big todos-thumb" > <p> <span class= "todos-thumb-span" >monaco see</span> </p> </         div> </div><!--col1--> <div class= "col col1" > <div class= "Big Todos-thumb" > <p> <span class=" Todos-thumb-span ">the" flower</span> </  p> </div> </div><!--col2--> <div class= "col col2" > <div class= "big Todos-thumb "> <p> <span class= "todos-thumb-span" >chapel bridge</span> </p> &L t;/div> </div><!--col3--> </div><!--Demo-->

STEP2. CSS style

 . col{Position:absolute; 	Border-right:none; 	Z-index:1; left:0;  	}. col1{left:51px; col2{left:102px; col3{left:153px;. line {margin-top:51px;}. active {z-index:10; Opacity:1;   }. Big:hover, small:hover{background:white; big{overflow:hidden; padding:1px;. big p {width:50px;   height:50px;   line-height:1.3;   Z-index:10;   Transition:all 0.2s ease-out;   position:relative; Cursor:pointer;  	icon-font{float:left. Big p img {width:50px; 	height:50px; Float:left;  	}. lock-thumb. icon-font{margin-left:25%; todos-thumb {Background:rgb (255,255,255,0.1);}. todos-thumb:hover { 	Background: #2FB1BE; 	Color: #FFFFFF; box-shadow:0 0 2px #333; 	}. Col. todos-thumb {z-index:10; todos-thumb-span{display:block; Padding-left:5em; 	}. todos-thumb p span{width:150px; 	padding-top:5px; Font-size:1.2em; }. Todos-thumb:hover p{margin-right:200px;}  

Step3. Insert Script

$(document).ready(function(){ 	$("#demo .col").mouseenter(function(){ 		$(this).addClass("active"); 		$(".active").siblings().css("opacity", "0.4"); //除了加载到.active样式以外都改变其opacity 	}); 	$("#demo .col").mouseleave(function(){ 		$(this).removeClass("active"); 		$("#demo .col").css("opacity", "1"); 	}); });

In addition, in order to enrich the performance of the photo wall, I added the IMG load effect, with a unveil jquery plug-in, using the following:

<script type="text/javascript" src="js/jquery.unveil.min.js"></script> <script> $(function() { 	$("#demo img").unveil(300); //id为demo下的所有img图片 }); </script>

Download