Cómo crear un efecto hover con capa de color sólido y opacidad en CSS

[Peter Sandoval]

Hola betas.

¿Cómo puedo hacer que el hover de una imagen sea una capa de color sólido con opacidad?

Aquí dejo algunos ejemplos, sé que se puede hacer con 2 imágenes diferentes, pero con CSS cómo se puede lograr.

Imagen sin hover:

Imagen con hover:

Saludos.

 

[ramifenili]

Podés usar un contenedor para la imagen de fondo, que sea del color que quieras.
Cuando se haga el hover, le bajas la opacidad a la imagen :encouragement:

Te muestro cómo quedaría Edit fiddle - JSFiddle

 

[ismael158]

Podrias probar con esto:

#id_del_elemento:hover{
background: rgba(64, 98, 127, 0.5);
}

donde 0.5 seria el valor de la opacidad desde 0 a 1

 

[Peter Sandoval]

Podés usar un contenedor para la imagen de fondo, que sea del color que quieras.
Cuando se haga el hover, le bajas la opacidad a la imagen :encouragement:

Te muestro cómo quedaría Edit fiddle - JSFiddle

Gracias, voy a ver cómo queda así.

- - - Actualizado - - -

Podrias probar con esto:

#id_del_elemento:hover{
background: rgba(64, 98, 127, 0.5);
}

Es lo primero que probé, pero la el color se pone detrás de la imagen y como es un cuadrado no se ve nada.

 

[johanso]

Con opacity y background-color se logra ese efecto.

 

[Peter Sandoval]

Podés usar un contenedor para la imagen de fondo, que sea del color que quieras.
Cuando se haga el hover, le bajas la opacidad a la imagen :encouragement:

Te muestro cómo quedaría Edit fiddle - JSFiddle

Así me queda:

Lo que hace es poner la imagen con menos opacidad para que se note el color de fondo que está detrás, ¿no conoces otra forma de hacerlo, sin bajarle la opacidad al imagen?

- - - Actualizado - - -

Con opacity y background-color se logra ese efecto.

¿Me puedes decir el código que debo usar?

El HTML lo tengo así:

<div class="col-xs-12 col-sm-6 col-md-4 no-padding overlay">
<a href="#">
<img src="img/project-01.jpg" alt="portfolio">
</a>
</div>

 

[ismael158]

Podés usar un contenedor para la imagen de fondo, que sea del color que quieras.
Cuando se haga el hover, le bajas la opacidad a la imagen :encouragement:

Te muestro cómo quedaría Edit fiddle - JSFiddle

al aplicar opacity si se logra el efecto pero la imagen tambien pierde opacidad. habra que ver otro metodo xD

 

[ramifenili]

[MENTION=40822]PeterSandovalM[/MENTION], ¿estás seguro de aplicar bien el código? El contenedor no debería perder la opacidad, únicamente la imagen.

Igualmente hay otra manera, podés usar un div encima, mirá: Edit fiddle - JSFiddle

al aplicar opacity si se logra el efecto pero la imagen tambien pierde opacidad. habra que ver otro metodo xD

En realidad lo único que pierde opacidad es la imagen, no el contenedor.

 

[johanso]

[MENTION=40822]PeterSandovalM[/MENTION], ¿estás seguro de aplicar bien el código? El contenedor no debería perder la opacidad, únicamente la imagen.

Igualmente hay otra manera, podés usar un div encima, mirá: Edit fiddle - JSFiddle


En realidad lo único que pierde opacidad es la imagen, no el contenedor.

Exacto, no le apliques opacidad a todo el elemento, aplicaselo solo a ala imagen, no al elemento padre, y al contenedor le dejas el color de background que quieres.

 

[Peter Sandoval]

Exacto, no le apliques opacidad a todo el elemento, aplicaselo solo a ala imagen, no al elemento padre, y al contenedor le dejas el color de background que quieres.

Es lo que había hecho, pero no me convence tener la imagen con menos opacidad (a menos que no haya otra manera de lograr el efecto que busco).

- - - Actualizado - - -

[MENTION=40822]PeterSandovalM[/MENTION], ¿estás seguro de aplicar bien el código? El contenedor no debería perder la opacidad, únicamente la imagen.

Igualmente hay otra manera, podés usar un div encima, mirá: Edit fiddle - JSFiddle


En realidad lo único que pierde opacidad es la imagen, no el contenedor.

Ese me funcionó perfecto, aunque no termino de entender la primera linea de código, ¿me lo podrías explicar?.

Gracias.

 

[johanso]

Es lo que había hecho, pero no me convence tener la imagen con menos opacidad (a menos que no haya otra manera de lograr el efecto que busco).

Otra alternativa son los filtros de CSS pero no te funcionaran en firefox, o jQuery, pero de todas formas tienes que cambiar la opacidad del elemento y dejar el fondo solido.

 

[ramifenili]

Es lo que había hecho, pero no me convence tener la imagen con menos opacidad (a menos que no haya otra manera de lograr el efecto que busco).

- - - Actualizado - - -



Ese me funcionó perfecto, aunque no termino de entender la primera linea de código, ¿me lo podrías explicar?.

Gracias.

Por ahí va a parecer que te estoy haciendo un chiste, porque es lo que se lee :welcoming:

El div que tiene el fondo celeste (.hover), tiene la propiedad de display:none (para no mostrarse).
Con la primer línea, le digo que cuando se le de hover al div que contiene la imagen, se muestre el .hover, con la propiedad display:inline-block (también pude haber usado display:block).

Espero que sea esa tu pregunta :encouragement:

 

[Peter Sandoval]

Por ahí va a parecer que te estoy haciendo un chiste, porque es lo que se lee :welcoming:

El div que tiene el fondo celeste (.hover), tiene la propiedad de display:none (para no mostrarse).
Con la primer línea, le digo que cuando se le de hover al div que contiene la imagen, se muestre el .hover, con la propiedad display:inline-block (también pude haber usado display:block).

Espero que sea esa tu pregunta :encouragement:

Clarísimo, gracias compañero! :encouragement:

 

[OLMID]

Hola

Te dejo una forma sencilla utilizando solo un div

Edit fiddle - JSFiddle

Saludos 🙂