cómo agregar un color superponer sobre una imagen con CSS

Question

si tengo una imagen de este modo:

<img src="inshot1.jpg" width="100px" height="100px">​​​​​​​ 

y en vuelo estacionario quiero ese bloque a ser cubierto en un color. Por ejemplo, cuando pasas el cursor sobre él obtienes un bloque de color rojo con la misma altura y ancho. Entonces una superposición básicamente?

Answer 1

Se puede hacer de varias maneras, pero se puede simplemente se envuelve en un <div> con un background-color y establecer visibility: hidden en la imagen de :hover

html:

<div><img src="img.jpg"></div> 

css

div { background: red; display: inline-block; } 
img { display: block; } 
div:hover img { visibility: hidden; } 

Answer 2

Aquí hay dos w Si puede hacer esto, ambos implican envolver la imagen en un elemento contenedor.

el uso del fondo del contenedor

Puede configurar el fondo del elemento que contiene a rojo y luego disminuir la imágenes opacidad en vuelo estacionario:

El HTML es el siguiente:

<!-- Uses background color to fade color from behind. --> 
<div id="background"> 
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" /> 
</div> 

Y el CSS se ve así:

div { position: relative; float: left; } 
img { display: block; } 

#background { background: red; } 
#background:hover img { opacity: 0.5; } 

Usar un hermano Elemento

Puede anidar un lapso de vacío y utilizarlo como un hermano con posición absoluta que puede servir como la superposición. Mira esto - aquí está el código HTML:

<!-- Uses empty span to overlay color. --> 
<div id="overlay"> 
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" /> 
    <span></span> 
<div>​ 

Y el CSS se vería así:

div { position: relative; float: left; } 
img { display: block; } 

#overlay span { 
    background: red; 
    bottom: 0; 
    display: block; 
    left: 0; 
    opacity: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 1; 
} 

#overlay:hover span { opacity: 0.5; } 

Usted puede probar una demo de cada solución aquí:

http://jsfiddle.net/jimjeffers/mG78d/1/

Posible Gotcha

Es importante tener en cuenta que para que el elemento que contiene para que coincida con el tamaño de la imagen que hay que hacer una de cuatro cosas:

1. flotador que contiene el elemento.
2. Posiciona absolutamente el elemento contenedor.
3. Establezca el elemento contenedor para mostrar: bloque en línea.
4. Defina explícitamente el alto y el ancho del elemento contenedor para que coincida con las dimensiones de la imagen.

En mi ejemplo de jsfiddle configuré los divs para que flote: izquierda ;.