CODEWITHSUNDEEP
htmlcss
Onkar Sarfare
Onkar Sarfare

Reputation: 3

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

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>

Upvotes: 0

Views: 993

Answers (3)

cssyphus
cssyphus

Reputation: 40096

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>

Upvotes: 1

Ahmad Khidir
Ahmad Khidir

Reputation: 150

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. I.e:

<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;
}

Upvotes: 0

roshnet
roshnet

Reputation: 2073

Try the following CSS -

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

Change 0.6 by the amount you need to zoom out.

Upvotes: 0

Related Questions