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.