CSS Transitions

Simple CSS 3 Transition on hover event

by vincentieo

HTML

<ul class="gallery">
	<li><img src="http://lorempixel.com/400/200/"></li>
	<li><img src="http://lorempixel.com/400/200/city"></li>
	<li><img src="http://lorempixel.com/400/200/animals"></li>
</ul>

CSS

.gallery img {
	width:300px; 
	border: solid 5px #111111;
	transition : border 500ms ease-out; 
  -webkit-transition : border 500ms ease-out; 
  -moz-transition : border 500ms ease-out;
  -o-transition : border 500ms ease-out;    
}

.gallery img:hover {border: #06C solid 5px;} 

.gallery li {list-style: none;}

JavaScript

// No JavaScript Needed