Skip to main content
se eliminaron 220 caracteres en el cuerpo
Origen Enlace

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;
    transformdisplay: scale(1);    block;
} 


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

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


.hovring ul li img{
    display: none;
}

.hovring ul li:hover img{
    display: block;
} 


Origen Enlace

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