How To Create an Overlay Zoom Hover Effect in CSS [CODE]

CSS transform Property

The transform CSS property allows you to turn, scale, slant, or decipher a component.

Value	Description
none	Defines that there should be no transformation
matrix(n,n,n,n,n,n)	Defines a 2D transformation, using a matrix of six values
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Defines a 3D transformation, using a 4×4 matrix of 16 values
translate(x,y)	Defines a 2D translation
translate3d(x,y,z)	Defines a 3D translation
translateX(x)	Defines a translation, using only the value for the X-axis
translateY(y)	Defines a translation, using only the value for the Y-axis
translateZ(z)	Defines a 3D translation, using only the value for the Z-axis
scale(x,y)	Defines a 2D scale transformation
scale3d(x,y,z)	Defines a 3D scale transformation
scaleX(x)	Defines a scale transformation by giving a value for the X-axis
scaleY(y)	Defines a scale transformation by giving a value for the Y-axis
scaleZ(z)	Defines a 3D scale transformation by giving a value for the Z-axis
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
rotate3d(x,y,z,angle)	Defines a 3D rotation
rotateX(angle)	Defines a 3D rotation along the X-axis
rotateY(angle)	Defines a 3D rotation along the Y-axis
rotateZ(angle)	Defines a 3D rotation along the Z-axis
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis
perspective(n)	Defines a perspective view for a 3D transformed element
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Table from: W3Schools

<div class="block-wrapper"><img src="https://cdn.pixabay.com/photo/2017/09/09/18/25/living-room-2732939_960_720.jpg" />
<div class="overlay">
<div class="content">
<h1>Stay at home</h1>
WHO is providing advice to help you and your family be healthy at home, with tips on staying physically active, looking after our mental health, quitting tobacco and healthy parenting.

</div>
</div>
</div>

body{
font-family: 'Lato';
color: #fff
}
.block-wrapper{
position:relative;
max-width: 1100px;
width: 100%;
border-radius: 10px;
margin: auto;
overflow:hidden;
}
.content{
font-size: 20px;
position:absolute;
top: 50%;
left: 50%;
width: 80%;
text-align:center;
transform:translate(-50%, -50%)

}
.overlay{
position:absolute;
bottom: 0;
left: 0;
right: 0;
width:100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
transform: scale(0);
transition: .4s ease
}
.block-wrapper:hover .overlay{
transform: scale(1)
}
img{
display:block;
width: 100%;
height:auto
}
h1{
font-family: 'Cookie';
font-size: 100px;
text-shadow: 0 0 15px #3c3c3c;
margin-bottom: 25px
}
p{
text-shadow: 0 0 10px #000;
font-size: 24px;
}