Skip to main content
1 de 2

Cómo utilizo este metodo para aplicar "hover" sobre un texto y que aparezca una imagen?

Lo que intento hacer es que, al pasar el cursor por cierta parte de la canción, aparezca una foto, y al sacar el cursor desaparezca. Intento usar este método. también lo vi en un video, y no logro encontrar donde esta mi error. Logro que aparezca la imagen pero está ahí estática. sin necesidad del hover, y por lo tanto no desaparece tampoco. que estoy haciendo mal? hay algun programa que tengo que descargar? algo que tengo que instalar? (no hice ninguna de esas dos cosas)


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="cssystyle.css">    
</head>

<body>
    
    <section>   
    <div class="container hovring">     
        
<ul>
    <li>
        <span>Flashback when you met me<br>
Your buzzcut and my hair bleached</span>
<img src="../imagenes/fotos para info/hair.jpg" alt="">
    </li>
</ul>
    
    </div>
    </section>
    
</body>
</html>

Y acá el CSS que usé:

@charset "utf-8";
/* CSS Document */


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

section{}
.container{
    width: calc(100% - 200px);
    margin: auto;
    padding: 100px;
}

ul{
    list-style: none;
}

ul li{
    font-size: 40px;
    line-height: 1.8;
    display: inline-block;
    position: relative;
}

ul li span{
    cursor: pointer;
    
}

.hovring ul li img{
    visibility: hidden;
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 1;
    transition: all 0.3s ease;
    transform: scale(0);
}

.hovring ul li:hover img{
    visibility: visible;
    transform: scale(1);    
}