<div class="grid">
  <p>lorem</p>
  <img src="https://picsum.photos/id/2/100/100" alt="">
  <p>ipsum.</p>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: 100px;
  border: 2px solid green;
  width: 400px;
}

.grid > * {
  margin: 0;
  border: 1px solid tomato;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid > img:hover {
  grid-column: span 2;
  width: 200px;
  height: 100%;
  object-fit: cover;
}