Color Hover Effect

by Keith Jeter

HTML

<div class="photos">  
    <div id="img1">  
        <img src="http://galnova.com/2015/char/rich-2015-small-bw.jpg" alt="Rich" class="nocolor" />  
        <img src="http://galnova.com/2015/char/rich-2015-small.jpg" alt="Rich" class="color" />  
    </div>
</div>

<div class="photos"> 
    <div id="img2">  
        <img src="http://galnova.com/2015/char/FIR-small-bw.jpg" alt="Rich" class="nocolor" />  
        <img src="http://galnova.com/2015/char/FIR-small.jpg" alt="Rich" class="color" />  
    </div>
</div>

<div class="photos"> 
    <div id="img3">  
        <img src="http://galnova.com/2015/char/j1.JPG" alt="Rich" class="nocolor" />  
        <img src="http://galnova.com/2015/char/j6.JPG" alt="Rich" class="color" />  
    </div>
</div>

<div class="photos"> 
    <div id="img4">  
        <img src="http://galnova.com/2015/char/zach-small-bw.jpg" alt="Rich" class="nocolor" />  
        <img src="http://galnova.com/2015/char/zach-small.jpg" alt="Rich" class="color" />  
    </div> 
</div>

CSS

.photos { overflow: hidden; width: 100%; }
/*
.photos div {  
    float: left;
	cursor: pointer;
    display: block;  
    width: 100%;
    height: 900px;
    position: relative;   
    margin: 10px;    
    overflow: hidden;
}  
.photos div img.nocolor {  
    position: absolute;  
    left: 0;  
    top: 0;     
}  
.photos div img.color {
	opacity: 0.1;  
	z-index: 8; 
    position: absolute;  
    left: 0;
	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.photos div img.color:hover { opacity: 1; }*/
.photos div {  
    float: left;
    display: block;  
    width: 100%;
    height: 900px;
    position: relative;   
    margin: 10px;    
    overflow: hidden;
}  
.photos div img.nocolor {  
    position: absolute;  
    left: 0;  
    top: 0;  
    z-index: 99;    
    opacity: 1;
    transition: opacity 0.8s linear;    
}  

.photos div img.nocolor:hover {  
    opacity: 0;
    transition: opacity 0.8s linear;
}  
   
.photos div img.color {  
    position: absolute;  
    left: 0;   
    top: 0;  
}

JavaScript

/*$(document).on('mouseenter','.photos div',function () {
	"use strict";
	$(this).find('img.nocolor').stop().animate({ 'opacity': '0' }, 800);
});

$(document).on('mouseleave','.photos div',function () {
	"use strict";
	$(this).find('img.nocolor').stop().animate({ 'opacity': '1' }, 800);
});*/