Stack Overflow en español Asked on November 27, 2021
.zona-descuentos div{
display: inline-block;
padding: 1rem;
width: 220px;
background: white;
margin-bottom: 3rem;
transition: 0.5s;
}
#info{
display: none;
}
.capsula:hover #info{
display: block;
}
.zona-descuentos img{
width: 230px;
height: 250px;
}<div class="zona-descuentos">
<div class="capsula">
<a href=""><img src="../imagenes/descuentos/ukelele-descuento.jpg" alt="">
<div id="info"><h4>385.344</h4><h6>30%OFF</h6><h5>Ukele soprano</h5></a></div>
</div>
<div class="capsula">
<a href=""><img src="../imagenes/descuentos/sintetizador-descuento.jpg" alt=""></a>
</div>
<div class="capsula">
<a href=""><img src="../imagenes/descuentos/guitarrae-descuento.jpg" alt=""></a>
</div>
<div class="capsula">
<a href=""><img src="../imagenes/descuentos/trompeta-descuento.jpg" alt=""></a>
</div>
</div>Estoy intentando crear una lista de productos y me gustaría que dieran la información de cada uno cuando paso el mause por arriba de él, como aparece en las dos imágenes. Intenté poniendo display none a la información y haciendo que aparezca cuando paso el mause por la imagen pero no sé por qué el resto de imágenes también se mueven. Si me pueden ayudar con un link donde expliquen este efecto se los agradecería mucho, he buscado pero no encuentro nada sobre esto.
https://ibb.co/DWsYCk9
https://ibb.co/LxWtbkx
concentrate en el alto de la capsula , cuando haces un hover sonbre esta, cambia el alto en este caso te lo puse de 300px a 350px, como ejemplo pero vos veras las alturas , y al mismo tiempo haces aparecer la descripcion como bien hiciste con #info, concentrate en las cards (capsulas) no lo hagas a nivel contenedor , el contenedor que tengas sus dimensiones fijas o dinamicas con el display (inline-block, flex...) que vos elijas
.capsula {
width: 300px;
height: 200px; /* declara el alto fijo que se modifica con el hover */
border: 1px solid black;/* para ternerlo como guia */
overflow: hidden; /* para que quede mas lindo el efecto cuando aparece el
parrafo descripcion */
transition: height .9s; /* con height estas diciendo que solo esa propiedad
tengas esos segundos de accion en el cambio */
}
#info{
display: none;
}
.capsula:hover #info{
display: block;
}
.capsula:hover {
height: 350px;
cursor: pointer;/* cursor */
}
.capsula img{
width: 100%;
}
Answered by facu aquino on November 27, 2021
Jugando con display: none y display: block irremediablemente cuando el elemento .info aparezca va a empezar a ocupar espacio, por lo que va a empujar al contenido que haya debajo de él para poder mostrarse.
Si quieres evitar esto puedes jugar con las propiedades visibility: hidden y visibility: visible que lo que hace es mantener el espacio que ocuparía el elemento de estar mostrándose.
.zona-descuentos div{
display: inline-block;
padding: 1rem;
width: 220px;
background: white;
margin-bottom: 3rem;
transition: 0.5s;
}
.info {
visibility: hidden;
}
.capsula:hover .info{
visibility: visible;
}
.zona-descuentos img {
width: 230px;
height: 250px;
}<div class="zona-descuentos">
<div class="capsula">
<a href="">
<img src="https://static.affinity-petcare.com/advance/cdn/farfuture/6uTxpGQzOTX3xDO_nq8ipqZSCjqs6cxDE7_Ta3YPrSk/drupal-cache:qdip0x/sites/default/files/field/image/diarrea_en_gatitos_1.jpg" alt="">
<div class="info"><h4>385.344</h4><h6>30%OFF</h6><h5>Ukele soprano</h5></div>
</a>
</div>
<div class="capsula">
<a href="">
<img src="https://static.affinity-petcare.com/advance/cdn/farfuture/6uTxpGQzOTX3xDO_nq8ipqZSCjqs6cxDE7_Ta3YPrSk/drupal-cache:qdip0x/sites/default/files/field/image/diarrea_en_gatitos_1.jpg" alt="">
<div class="info"><h4>385.344</h4><h6>30%OFF</h6><h5>Ukele soprano</h5></div>
</a>
</div>
<div class="capsula">
<a href="">
<img src="https://static.affinity-petcare.com/advance/cdn/farfuture/6uTxpGQzOTX3xDO_nq8ipqZSCjqs6cxDE7_Ta3YPrSk/drupal-cache:qdip0x/sites/default/files/field/image/diarrea_en_gatitos_1.jpg" alt="">
<div class="info"><h4>385.344</h4><h6>30%OFF</h6><h5>Ukele soprano</h5></div>
</a>
</div>
<div class="capsula">
<a href="">
<img src="https://static.affinity-petcare.com/advance/cdn/farfuture/6uTxpGQzOTX3xDO_nq8ipqZSCjqs6cxDE7_Ta3YPrSk/drupal-cache:qdip0x/sites/default/files/field/image/diarrea_en_gatitos_1.jpg" alt="">
<div class="info"><h4>385.344</h4><h6>30%OFF</h6><h5>Ukele soprano</h5></div>
</a>
</div>
</div>Referencia: visibility
También transforme el elemento info es una clase en vez de en un id para poder usarlo en más de una capsula.
Answered by phpMyGuel on November 27, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP