Ajouter une superposition à une image

Question

Je voulais ajouter une superposition à une image si elle survolait l'image.

J'ai essayé beaucoup de manières mais l'image semble juste disparaître ou rester la même chose.

C'est ce que ce sera comme

<a id="icon" 
    style="background: url(/images/layout/top/icon.gif); height:23px; width:23px; float:left; margin-right:3px;" 
    href="page.php?pageid=123" title="Icon"> 
</a> 

Vraiment et vraiment, ce que je suis après est un moyen rapide d'avoir le changement d'image sans avoir à faire plus d'images. Lorsque vous passez la souris sur l'image - Image d'origine Lorsque vous passez la souris sur l'image - 40% de superposition de couleurs?

Merci à l'avance.

Ce que j'essayé:

a.thumbnail { 
background-color:orange; 
filter: Alpha(Opacity=40, Style=0); 
-moz-opacity: 40%; 
opacity: 0.4; 
} 

Answer 1

J'ai créé un petit violon qui a cela ne recouvre pas, mais donne le même effet en utilisant seulement CSS. De plus, j'ai jeté quelques transitions CSS pour le plaisir. Fondamentalement, créer un div derrière l'image qui est révélée via le vol stationnaire de pseudo-élément. De cette façon, vous pouvez déposer vos tags sans avoir besoin de créer des images de fond CSS comme des fous. Echangez juste les trucs alpha pour que la superposition fonctionne dans l'autre sens.

http://jsfiddle.net/wesleyterry/jwXvA/#base

espérance qui est ce que vous recherchez.

Answer 2

Fondamentalement, si elle est une superposition, vous pouvez prendre la hauteur et la largeur va probablement être le même.

dans cette démo i accidentellement utilisé des images dimensionnées 25. Le changement de 23

http://jsfiddle.net/raU2J/7/

<div class="overlay_wrapper"> 
    <a href="#"></a> 
    <div class="overlay"></div> 
    <img src="cake.jpg" /> 
</div>​ 


.overlay, 
.overlay_wrapper a, 
.overlay_wrapper { 
    width: 25px; 
    height: 25px; 
    position: relative; 
} 

.overlay_wrapper a { 
    position: absolute; 
    z-index: 10; 
    display: block; 
} 

.overlay { 
    display: none; 
    background: red; 
    position: absolute; 
    top: 0; 
    left: 0; 
    filter: Alpha(Opacity=40, Style=0); 
    -moz-opacity: 40%; 
    opacity: 0.4; 
    z-index: 9; 
}​ 

jquery:

$(".overlay_wrapper").hover(
    function() { 
    $(this).find('.overlay').fadeIn(); 
    }, 
    function() { 
    $(this).find('.overlay').fadeOut(); 
    } 
); 

Answer 3

Ce n'est pas possible avec juste le <a> unique, mais vous peut mettre le <a> dans un conteneur (un span ou un div). Donnez au conteneur l'arrière-plan souhaité et donnez une couleur de fond a:hover comme rgba(255, 255, 255,.4).

Si cela ne fonctionne pas comme vous le souhaitez, expliquez-en plus sur vos besoins.

Answer 4

L'échantillon démo:

html

<div class="img"><div class="overlap"></div></div> 

css

.img {width:100px;height:100px;background:red;position:relative;} 
.overlap { visibility:hidden;} 
.hover .overlap {position:absolute;top:0;left:0;width:100px;height:100px;background:#333;filter:alpha(opacity=40); /* for IE */ -moz-opacity:0.4; opacity: 0.4;-khtml-opacity: 0.4; visibility:visible;}