HTML Hintergrund zoomen wenn die Maus darüber ist

Question

Wie kann ich ein HTML Hintergrundbild eines div zoomen wenn ich mit der Maus darüber fahre?

.background-div {
  width: 150px;
  height: 150px;
  background-image: url('https://i.pravatar.cc/150?img=1');
}

<div class="background-div"></div>

Answer 1

Du kannst den Hintergrund in ein eigenes DIV platzieren.

<div class="background-div">
  <div class="imgelement"></div>
</div>

und mit CSS eine Animation mit dem Pseudo Element :hover ausführen.

.background-div {
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden;
}

.imgelement {
  width: 100%;
  height: 100%;
  background-image: url('https://i.pravatar.cc/150?img=1');
  background-size: cover;
  transition: transform 0.3s ease; /* Übergangseffekt für den Zoom */
}

.background-div:hover .imgelement{
  transform: scale(1.2); /* Vergrößert das Bild um 20% */
  transition: transform 0.3s ease;
  background-size: cover;
}

JSFiddle Beispiel