![How To Create an Overlay Zoom Hover Effect in CSS [CODE]](https://22bulbjungle-153fe.kxcdn.com/wp-content/uploads/2020/04/How-To-Create-an-Overlay-Zoom-Effect-in-CSS-min.jpg "How To Create an Overlay Zoom Effect in CSS-min")
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;
}
