Alejandro Guerrero
Preguntastudent•hace 6 años
Hola amigos el hover no me funciona
<<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./style.css"> <title>Layout de Instagram</title> </head> <body> <section class="post-list"> <a href="" class="post"> <figure class="post-image"> <img src="../instagram/compu.jpg" alt=""> </figure> </a> <span class="post-overlay"> <p> <span class="post-likes">150</span> <span class="post-comments">10</span> </p> </span> </section> </body> </html> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .post { cursor: pointer; position: relative; display: flex; width: 200px; } .post-image { margin: 0; } .post-image img { width: 100%; vertical-align: top; } .post-overlay { background: rgba(0, 0, 0, .5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; align-items: center; justify-content: center; color: white; text-align: center; } .post:hover .post-overlay { display: flex; } >
Alejo Fonseca
student•hace 6 años
Encerrá todo dentro de <a href="" class="post"> Así
Stefanny Torres
student•hace 6 años
En el HTML el contenido de post-overlay debe estar dentro de post. O sea queda así:
<a href="" class="post"> <figure class="post-image"> <img src="img/compu.jpg" alt=""> </figure> <span class="post-overlay"> <p> <span class="post-likes">150</span> <span class="post-comments">10</span> </p> </span> </a>
