stackacc stackacc - 2 months ago 12
CSS Question

Hover background (scale up) with text in front not getting scale up

When user hover on the image, the image is getting bigger. But I also have some information to show in front of the image.

This is what I've done so far:



.home-about-link{
overflow: hidden;
width: 100%;
}
.home-about{
background: url(https://dummyimage.com/600x400/000/fff) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
height: 300px;
width: 100%;
opacity: 0.8;
}
.home-about:hover {
opacity: 1;
transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1); /* IE 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand'); /* IE6 and 7 */
}

h2{
color: #fff;
}

<div class="home-about-link">
<div class="home-about">
<h2>ABOUT US</h2>
</div>
</div>





What the code do is when user hover on the image, the information (ABOUT US text) is also getting bigger. What I tried to get is the information font is stay same as before, only the background scale up. Is there any way to achieve this?

Answer

So you don't want to scale the h2 along with the background.

One way is to reverse scale the h2 with a scale factor 1/1.1 = 0.909

.home-about:hover h2{
  transform: scale(0.909);
}

Let me know your feedback on this. Cheers!

.home-about-link {
  overflow: hidden;
  width: 100%;
}
.home-about {
  background: url(https://dummyimage.com/600x400/000/fff) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  height: 300px;
  width: 100%;
  opacity: 0.8;
}
.home-about:hover {
  opacity: 1;
  transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')";
  /* IE8 */
  filter: progid: DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand');
  /* IE6 and 7 */
}
h2 {
  color: #fff;
}
.home-about:hover h2 {
  transform: scale(0.909);
}
<div class="home-about-link">
  <div class="home-about">
    <h2>ABOUT US</h2>
  </div>
</div>