Place an image above another image without opacity
<p>I want to display an image above another image. And on hover below image the above image should display and below image opacity should change.</p>

<p>Now the result is, both the image is having opacity.</p>

<p><strong>HTML :</strong></p>

<pre><code>&lt;div class="contents"&gt;
            &lt;div align="center"&gt;
                &lt;p align="right"&gt;Sort by &lt;select name=""&gt;&lt;option value=""&gt;----- Select -----&lt;/option&gt;&lt;/select&gt;&lt;/p&gt;
                &lt;div class="items"&gt;
                    &lt;p&gt;&lt;img src="https://i.kinja-img.com/gawker-media/image/upload/cg0vk7wvosjaxlji7jhr.jpg" alt="" /&gt;&lt;/p&gt;
                    &lt;p&gt;Microsoft Lumia 950&lt;/p&gt;
                    &lt;p&gt;&lt;span class="strike offer_price"&gt;Rs.1000/-&lt;/span&gt; &lt;b&gt;Rs.500/-&lt;/b&gt;&lt;/p&gt;
                    &lt;hr/&gt;
                    &lt;p&gt;&lt;input type="checkbox" /&gt; Add to compare&lt;/p&gt;
                    &lt;div class="offer_per"&gt;
                        &lt;p&gt;&lt;b&gt;50% Off&lt;/b&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="add_cart"&gt;
                        &lt;p align="center"&gt;&lt;img src="http://png-1.findicons.com/files/icons/1672/mono/32/shoppingcart.png" alt="" /&gt;&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p><strong>CSS :</strong></p>

<pre><code>.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;
}
</code></pre>

<p><strong>jquery :</strong></p>

<pre><code>    $('.items').mouseenter(function(e) {
        $('.add_cart').show();
    });

    $('.items').mouseleave(function(e) {
        $('.add_cart').hide();
    });
</code></pre>

<p>I have fiddled my code, just have a look <a href="https://jsfiddle.net/kcngmvcj/" rel="nofollow">https://jsfiddle.net/kcngmvcj/</a></p>