I am looking to create a layout where one image is displayed above another image. When the user hovers over the below image, the opacity of that image should change while the above image remains fully visible.
However, currently both images have reduced opacity when the user hovers over the lower image.
HTML :
<div class="contents">
<div align="center">
<p align="right">Sort by <select name=""><option value="">----- Select -----</option></select></p>
<div class="items">
<p><img src="https://i.kinja-img.com/gawker-media/image/upload/cg0vk7wvosjaxlji7jhr.jpg" alt="" /></p>
<p>Microsoft Lumia 950</p>
<p><span class="strike offer_price">Rs.1000/-</span> <b>Rs.500/-</b></p>
<hr/>
<p><input type="checkbox" /> Add to compare</p>
<div class="offer_per">
<p><b>50% Off</b></p>
</div>
<div class="add_cart">
<p align="center"><img src="http://png-1.findicons.com/files/icons/1672/mono/32/shoppingcart.png" alt="" /></p>
</div>
</div>
</div>
</div>
CSS :
.contents .items {
width:24%;
height:auto;
display:inline-block;
box-shadow: 0 0 2px 2px #CCCCCC;
margin:10px 0 10px 5px;
position:relative;
}
.contents .items:hover {
box-shadow: 0 0 2px 2px #FD6123;
opacity: 0.5;
filter: alpha(opacity=50);
}
.contents .items p img {
width:100%;
}
.contents .items .offer_per {
position:absolute;
top:0;
background:#52C8D2;
padding:5px;
color:#FFFFFF;
font-size:12px;
}
.contents .items .add_cart {
left: 0;
position: absolute;
right: 0;
top: 50%;
display:none;
}
.contents .items .add_cart p img {
width:auto;
}
jquery :
$('.items').mouseenter(function(e) {
$('.add_cart').show();
});
$('.items').mouseleave(function(e) {
$('.add_cart').hide();
});
I've showcased my code on this JSFiddle link, feel free to take a look!