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);
}