2

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 !

3
  • 1
    ¿La clase htmlBefore dónde se aplica? el 22 oct. 2019 a las 16:58
  • 1
    En la etiqueta <html>
    – Fantasy
    el 22 oct. 2019 a las 17:21
  • Los selectores CSS funcionan en cascada, en el selector .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.
    – user7176
    el 26 oct. 2019 a las 10:12

1 respuesta 1

1

Puedes probar con unas sencillas funciones de javascript para aplicar el estilo sobre la clase que contiene la foto.

Por otra parte te sugiero que ubiques la foto en su propio bloque, de esta manera los cambios de estilo solo se aplicaran a la foto. Si la clase htmlBefore es el html los cambios de brillo se aplicaran sobre todos los elementos de la pagina.

En tu codigo quedaria asi:

let bg=document.getElementsByClassName('bg');
let htmlBefore=document.getElementsByClassName('htmlBefore');
bg[0].addEventListener('mouseover', changeDefOver);
bg[0].addEventListener('mouseout', changeDefOut);
function changeDefOver(){
  htmlBefore[0].style.filter='brightness(150%)';
}
function changeDefOut(){
  htmlBefore[0].style.filter='brightness(50%)';
}
.htmlBefore {
    background-image: url("https://www.fillmurray.com/200/300");
    /* Full height */
    height: 100vh;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    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;
}
<div class="htmlBefore">
</div>  
<div class="bg">
    <span class="R">Relaxs</span>
    <span class="T">Thanks</span>
</div>

Espero que te sirva, saludos.

1
  • Muchisimas gracias, es perfecto :)
    – Fantasy
    el 13 nov. 2019 a las 13:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.