Ajouter un voile teinté transparent sur n’importe quel type de visuel (JPG, GIF) et le faire disparaître au survol de la souris. Cette astuce est pratique lorsqu’on ne dispose pas de visuels détourés au format PNG avec des fonds transparents.
source HTML
|
1 2 3 4 5 6 7 8 |
<div class="product-item-information"> <div class="product-item-image-wrapper"> <a class="thumb" href="#"> <img src="#" alt="" /> <span class="veil"></span> </a> </div> </div> |
source LESS (bouuuh!)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.product-item-information{ .product-item-image-wrapper{ position: relative; .veil{ position: absolute; z-index: 2; width: 100%; height: 100%; opacity: .1; background: @veil-color; } } } .product-item-information:hover{ .product-item-image-wrapper{ .veil{ display: none; } } } |