CSS Overlay Transitions

Simple CSS 3 Overlay Transition on hover event

HTML

<ul class="gallery">
    <li>
        <div class="overlay">
            <img src="http://picsum.photos/400/200/">
         </div>
     </li>
	<li>
        <div class="overlay">
            <img src="http://picsum.photos/400/200/">
        </div>
    </li>
	<li>
        <div class="overlay">
            <img src="http://picsum.photos/400/200/">
        </div>
    </li>
</ul>

CSS

.overlay {background-color: #06C; max-width: 400px; max-height: 200px;}

.gallery img { 
	transition : opacity 500ms ease-out; 
  -webkit-transition : opacity 500ms ease-out; 
  -moz-transition : opacity 500ms ease-out;
  -o-transition : opacity 500ms ease-out;    
}

.gallery img:hover {opacity: 0.5;} 

.gallery li {list-style: none;}

JavaScript

// No JavaSctipt Needed