En css keyframes y html
¿Como se hace: un <div> con class 'postx' de width 250px y height 150px con una imagen, que al hacer :hover se le haga zoom-in lentamente y aparesca en medio un div class 'cartel' de 113px x 44px y al dejar de hacer :hover haga zoom-out lentamente y desaparesca el div class 'cartel' ; y adentro del div 'postx' en cada esquina tenga un <div> de menor tamaño que al hacer : hover en alguno de estos se expanda al tamaño del div class 'postx' ?
Para crear un <div> con la clase 'postx' de 250px x 150px con una imagen, que realice el efecto zoom-in/zoom-out y aparezca un div clase 'cartel' en el centro y de cuatro <div> más pequeños en las esquinas que se expandan al tamaño del div 'postx' al hacer :hover, puede utilizar el siguiente código HTML y CSS:
HTML:
```html
<div class="postx">
<div class="cartel">Soy un cartel</div>
<div class="esquina esquina1"></div>
<div class="esquina esquina2"></div>
<div class="esquina esquina3"></div>
<div class="esquina esquina4"></div>
<img src="tu-imagen.jpg" alt="imagen"/>
</div>
```
CSS:
```css
.postx {
width: 250px;
height: 150px;
position: relative;
overflow: hidden;
}
.postx:hover img {
animation: zoom 2s forwards;
}
.postx:hover .cartel {
opacity: 1;
}
.postx:hover .esquina {
transform: scale(1);
}
.cartel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 113px;
height: 44px;
background-color: rgba(255, 255, 255, 0.8);
color: black;
text-align: center;
line-height: 44px;
font-weight: bold;
font-size: 14px;
border-radius: 5px;
opacity: 0;
}
.esquina {
position: absolute;
width: 10px;
height: 10px;
background-color: white;
z-index: 10;
border-radius: 50%;
transform: scale(0.6);
transition: transform 0.5s;
}
.esquina1 {
top: 0;
left: 0;
}
.esquina2 {
top: 0;
right: 0;
}
.esquina3 {
bottom: 0;
left: 0;
}
.esquina4 {
bottom: 0;
right: 0;
}
@keyframes zoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
```
Explicación:
- El div con la clase 'postx' tiene un ancho de 250px y una altura de 150px, una posición relativa y un desbordamiento oculto.
- Al hacer hover sobre el div 'postx', la imagen tiene una animación CSS llamada 'zoom', que aumenta su tamaño en un 20% con una duración de 2 segundos.
- Al hacer hover en el div 'postx', el div 'cartel' se muestra en el centro del div 'postx'.
- Los cuatro divs de las esquinas tiene una posición absoluta y un radio de borde de 50%, y son escalados a un tamaño de 1 (o sea el tamaño completo de 'postx') al hacer hover.
- La animación keyframe 'zoom' aumenta lentamente el tamaño de la imagen de escala 1 a escala 1.2 y la mantiene en su tamaño aumentado al salir del hover.
- El div 'cartel' se establece a una opacidad de 0 y se muestra gradualmente al hacer hover.
- El div de cada esquina se establece a un tamaño de escala menor de 0.6 y se aumenta gradualmente al hacer hover.
Espero que esto responda tu pregunta. Si necesitas más información, no dudes en preguntar de nuevo.