Inspiration For Creative Minds
Home » Labs » CSS3 thumbnail image hover effect example  

Filed under Labs

Here is a cool CSS3 hover effects tutorial which use only pure CSS and without JavaScript. You can use it in your website web apps to enhance user experience and interactivity. Below is the source code which used to build the tutorial and at bottom there is an option to view live demo of the tutorial.

CSS

 
	ul.zoom{
		width:85%;
		height:auto;
		margin: 0 auto;
		list-style-type:none; 
	}
	ul.zoom li{
		display:inline-block; 
		position: relative;
		z-index: 0; 
		margin:10px 40px 0 20px;
	}
	ul.zoom img{
		background-color:#fff;
		padding: 6px;
		box-shadow: 0 0 6px rgba(0, 0, 0, .45);
		border-radius: 4px; 
	}
	ul.zoom span{
		position:absolute;
		left: -9999px;
		background-color:#fff;
		padding: 10px;
		color: #495a62; 
		box-shadow: 0 0 6px rgba(0, 0, 0, .45);
		border-radius: 4px; 
	}
	ul.zoom li:hover{
		z-index: 50;
		cursor:pointer;
	}
	ul.zoom span img{
		padding:2px;
		background:#ccc;
	}
	ul.zoom li:hover span{ 
		top: -80px; 
		left: -10px; 
	}
	ul.zoom li:hover:nth-child(2) span{
		left: -100px; 
	}
	ul.zoom li:hover:nth-child(3) span{
		left: -200px; 
	}

HTML

 
		<!--Zoom UNORDERED LIST-->
		<ul class="zoom"> 
 
			<!--First Image-->
			<li>
				<img src="http://vishmax.com/demos/images/small_01.jpg" width="150" height="100" alt="" />
				<span>
					<img src="http://vishmax.com/demos/images/large_01.jpg"  alt="" /> 
					<br />
					Sunflowers are beautiful 
				</span>
			</li>
 
			<!--Second Image-->
			<li>
				<img src="http://vishmax.com/demos/images/small_02.jpg" width="150" height="100" alt="" />
				<span>
					<img src="http://vishmax.com/demos/images/large_02.jpg"  alt="" /> 
					<br />
					Sunflowers are beautiful 
				</span>
			</li>
 
			<!--Third Image-->
			<li>
				<img src="http://vishmax.com/demos/images/small_03.jpg" width="150" height="100" alt="" />
				<span>
					<img src="http://vishmax.com/demos/images/large_03.jpg"  alt="" /> 
					<br />
					Sunflowers are beautiful 
				</span>
			</li>
 
			<!--Fourth Image-->
			<li>
				<img src="http://vishmax.com/demos/images/small_04.jpg" width="150" height="100" alt="" />
				<span>
					<img src="http://vishmax.com/demos/images/large_04.jpg"  alt="" /> 
					<br />
					Sunflowers are beautiful 
				</span>
			</li>
 
		</ul>
		<!--./ Zoom UNORDERED LIST-->

Demo

It's only fair to share...Share on Google+Tweet about this on TwitterShare on Facebook
Labs

Posts you may like: