Es un poco dificil de explicar lo que quiero hacer, asi que mejor lo explico con una imagen.
La imagen esta como background de un Div, este es el CSS
.contenedor{
position: relative;
display: inline-block;
text-align: center;
width: 500px;
height: 250px;
background-size: cover;
object-fit: cover;
margin: 25px;
}
.image1{
background-image: url("../../../public/img/pruebas/girasoles.jpg");
}
Lo que quiero es que al hacer hover, la imagen haga un pequeño zoom, osea que se haga mas grande pero sin salirse del Div. Alguien tiene alguna idea?
HTML
<div class="contenedor image1">
<div class="hoverBox">
<div class="Caja">
<div class="texto">Hola</div>
<div class="textoOculto">Necesito aparecer</div>
</div>
</div>
</div>
Ignoren el resto de los div internos, son para el texto, el marco, etc. Si debo poner JS no hay problema solo necesito ideas...