estoy intentando que cuando se produzca un hover sobre el párrafo donde pone 'Thanks', ademas de cambiar este (que ya lo hace) también aumente el brillo de la imagen de fondo.
Esta imagen se aloja en el html en el css con un background-image.
He probado varios métodos pero ninguno me ha dado resultado. Entre ellos he usado backdrop-filter: brightness(150%); que funciona pero solo dentro de la misma clase, si llamo a este atributo en un hover, parece que no hace el efecto.
Os dejo el código a ver que si me podéis echar un mano.
HTML
.htmlBefore {
background-image: url("https://www.fillmurray.com/200/300");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backdrop-filter: brightness(50%);
transition: all 1s ease 0s;
}
.bg {
background: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 1s ease 0s;
}
.bg .T, .R {
color: white;
font-size: 100px;
padding: 10px;
transition: all 1s ease 0s;
}
.bg .R {
display: none;
}
.bg:hover {
background: white;
font-size: 120px;
padding: 40px;
transition: all 1s ease 0s;
}
.bg:hover .R {
display: inline;
}
.bg:hover .T {
display: none;
}
.bg:hover .R {
color: black;
font-size: 100px;
padding: 10px;
transition: all 1s ease 0s;
}
.bg:hover .htmlBefore {
backdrop-filter: brightness(150%);
transition: all 1s ease 0s;
}
<div class="bg">
<span class="R">Relaxs</span>
<span class="T">Thanks</span>
</div>
¡ Espero vuestras respuestas y gracias de antemano !
.bg:hover .htmlBefore
la clase.htmlBefore
tendria que estar en un elemento hijo de.bg
. El css solo funciona de forma descendente, entre hermanos (siempre en el orden del html) o de padres a hijos.