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

Peter Sandoval · 26 Feb 2015

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 · 26 Feb 2015

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 · 26 Feb 2015

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 · 26 Feb 2015

ramifenili dijo:
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 - - -

ismael158 dijo:
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 · 26 Feb 2015

Con opacity y background-color se logra ese efecto.

Peter Sandoval · 26 Feb 2015

ramifenili dijo:
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 - - -

johanso dijo:
Con opacity y background-color se logra ese efecto.

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

El HTML lo tengo así:

HTML:

<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 · 26 Feb 2015

ramifenili dijo:
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 · 26 Feb 2015

[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

ismael158 dijo:
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 · 26 Feb 2015

ramifenili dijo:
[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 · 26 Feb 2015

johanso dijo:
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 - - -

ramifenili dijo:
[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 · 26 Feb 2015

PeterSandovalM dijo:
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 · 26 Feb 2015

PeterSandovalM dijo:
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 · 26 Feb 2015

ramifenili dijo:
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 · 1 Mar 2015

Hola

Te dejo una forma sencilla utilizando solo un div

Edit fiddle - JSFiddle

Saludos 🙂

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

Peter Sandoval

ramifenili

ismael158

Peter Sandoval

johanso

Peter Sandoval

ismael158

ramifenili

johanso

Peter Sandoval

johanso

ramifenili

Peter Sandoval

OLMID

Temas similares