Te dejo una alternativa a la de Slavis sin capa intermedia que se parece al ejemplo que has dado, para ello me he basado en esta pregunta, pero intercambiando el atributo display
por visibility
.
El motivo es que el segundo permite el uso de transiciones CSS, por lo demás actúa de forma similar a display:none en que recargan el layout.
Edición: He añadido un suavizado cuando se realiza el hover
añadiendo una transición a Objeto
y opacity
(opacidad) a cada elemento según su estado inicial, pero son totalmente opcionales y es posible no utilizar estos, simplemente se notará más bruscamente el cambio.
.Objeto{
position:absolute;
width: 250px;
height: 250px;
transition: 1s ease-in-out;
background: url('https://www.nps.gov/common/uploads/stories/images/nri/20161013/articles/71B2B5D2-1DD8-B71B-0B76C91DF3E21792/71B2B5D2-1DD8-B71B-0B76C91DF3E21792.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.Objeto2{
position:absolute;
width: 250px;
height: 250px;
transition: 1s ease-in-out;
visibility: hidden;
opacity:0;
background: url("https://www.publicdomainpictures.net/pictures/40000/velka/mountain-meet-the-sea.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.contenedor:hover .Objeto2{
visibility : visible;
opacity:1;
width: 350px;
height: 350px;
}
.contenedor:hover .Objeto{
visibility : hidden;
opacity:0;
}
<div class="contenedor">
<div class="Objeto"></div>
<div class="Objeto2"></div>
</div>
{}
).