How do I create a zoom out effect on a CSS background Image upon mouse hover?

Question

Upon mouse hover, I want to perform a Zoom out effect on background.jpg , which is on div .bgImg in the CSS:

background-image: url(/assets/background.jpg)

I tried using traditional hover effect in CSS but instead of zooming background.jpg , it is zooming all other elements in div tag. I only want to zoom the background Image.

Here is my complete code sample:

 .bgImg { background-image: url(/assets/background.jpg); min-height: 520px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; transition: transform.2s; }

 <div class="bgImg"> <app-navbar></app-navbar> <h1 class="profileName">XYZ &nbsp;&nbsp;XYZ</h1> <img class="omi" src="/assets/abc.jpg" width="80" height="100" alt="Image Not Found"> </div>

Answer 1

With your current HTML scaffolding, scaling the background picture size will also scale the other elements contained within that div.

 .bgImg { background-image: url(http://placekitten.com/900/50); min-height: 520px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; transition: transform.2s; }.bgImg:hover { transform: scale(0.6) }

 <div class="bgImg"> <app-navbar></app-navbar> <h1 class="profileName">XYZ &nbsp;&nbsp;XYZ</h1> <img class="omi" src="http://placekitten.com/50/50" width="80" height="100" alt="Image Not Found"> </div>

Instead, move the background image into its own div, that is positioned absolute and z-indexed underneath the rest of your HTML. Then, you can use a bit of js-foo to add/remove a class on hover of the main content div.

 var zoomed = false; const fnZoom = () => { if (zoomed) document.getElementsByClassName("bgImg")[0].classList.add("zoomy"); else document.getElementsByClassName("bgImg")[0].classList.remove("zoomy"); zoomed =;zoomed. } let mw = document.querySelector(';mainWrapper'). mw;onmouseover = fnZoom;

 .posAbs{position:absolute;top:0;left:0;width:99vw;height:99vh;}.zoomy {transform: scale(1.1);}.addBorder{border:1px solid cyan;} h1{width:fit-content;margin:0 auto;color:darkcyan;} img{display:inherit;margin: 0 auto;}.bgImg{ z-index: -1; filter:blur(5px); background-image: url(https://loremflickr.com/640/360); XXmin-height: 520px; background-position: center; background-repeat: no-repeat; background-size: cover; transition: transform.2s; }

 <div class="bgImg posAbs addBorder"></div> <div class="mainWrapper posAbs addBorder"> <app-navbar></app-navbar> <h1 class="profileName addBorder">HOVER ME</h1> <img class="omi addBorder" src="http://placekitten.com/300/200" /> </div>

Answer 2

Try the following CSS -

.bgImg:hover {
  transform: scale(0.6)
}

Change 0.6 by the amount you need to zoom out.

Answer 3

you can create a new div for the background image inside the main bgImg then position: absolute; the new div and position: relative; the bgImg and z-index: -100; the new div. You have to give both divs the same width and height. Ie:

<div class='bgImg'>
  <div class='new_div'></div>
</div>

css:

.bgImg {
  width: 500px;
  height: 500px;
  position: relative;
}
.new_div {
  background-image: url(image.jpg);
  width: 500px;/* or left: 0; right: 0; */
  height: 500px;/* or top: 0; bottom: 0; */
  position: absolute;
  z-index: -100;
  transition: transform .2s;
}