CSS3 thumbnail image hover effect example

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

Related posts:

Partner with Us

We are providing an exclusive partnership offer to individuals and companies who are interested in setting up their own web design & development company. For more information about how to partner with us, please contact us