Picnic Website Code Tutorials

CSS3 Slide Out Image Tutorial

3/29/2013

View Demo

How to CSS3 slide out image smile

CSS

a {
display:block;
position:relative;
width:100px;
height:100px;
background:red;
}
img {
position:absolute;
left:0;
-webkit-transition:.5s;
-moz-transition:.5s;
transition:.5s;
opacity:0;
z-index:-1;
}
a:hover img {	
left:100%;
opacity:1;
}
		

HTML

<a href="#"><img alt="image" src="http://lorempixel.com/100/100/"></a> 
		

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine