html - How do I create this effect hover? -


i have site:

link

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

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -