html - How do I create this effect hover? -
i have site:
code html:
<ul class="add-to-links"> <li><a href="http://www.altradona.ro/wishlist/index/add/product/156/" class="link-wishlist" data-id="156"><span class="compara">++</span></a></li> <li><a href="http://www.altradona.ro/catalog/product_compare/add/product/156/uenc/ahr0cdovl3d3dy5hbhryywrvbmeucm8v/" class="link-compare" data-id="156"><span class="favorit">kjk</span></a></li> </ul> code css:
.compara { width:42px; background:url("/media/wysiwyg/compare.png"); color:transparent !important; } .compara:hover { background:url("/media/wysiwyg/compare-hover.png"); } i tried create effect hover unfortunately not working. classic example ... missed in writing code? pictures on server.
can tell me please should changed?
thanks in advance!
this looking for:
#cont{ position: relative; } #cont:hover > #cover { display: block; } #img{ width: 300px; height: 350px; position: absolute; z-index: 1; } #cover{ width: 300px; height: 350px; position: absolute; z-index: 2; background: rgba(255,100,10,0.5); display: none; } <div id="cont"> <img id="img" src="http://www.altradona.ro/media/catalog/product/cache/1/small_image/252x252/9df78eab33525d08d6e5fb8d27136e95/l/o/logitech-cordless-optical-trackman.jpg"> <div id="cover"></div> </div>
Comments
Post a Comment