Home » Labs » CSS3 thumbnail image hover effect example  

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

Posts you may like: