HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development CSS

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

in CSS, Web Development
Reading Time: 3 mins read
505 15
0
716
SHARES
3.3k
VIEWS
Share on FacebookShare on Twitter

CSS transform Property

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

ValueDescription
noneDefines 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
initialSets this property to its default value.
inheritInherits this property from its parent element.

Table from: W3Schools

RelatedPosts

How To Create a Beating Heart Shape Animation Using CSS

How To Transition a Height of Zero to a Height of Auto?

How To Apply CSS to Half of a Character

<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;
}
Tags: CSS Hover Effectcss image hover effects
Share286Tweet179Share72

Related Posts

How To Create a Beating Heart Shape Animation Using CSS
CSS

How To Create a Beating Heart Shape Animation Using CSS

by 22bulbjungle
December 28, 2022
0

Create the HTML structure Create the HTML structure for the heart shape. We'll use a div element with the class "heart": <div...

Read more
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
Electronics, Smartphone, Computer & Tablet Repair Kit
How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Prevent or Disable Copy and Paste in an Input Field

How To Prevent or Disable Copy and Paste in an Input Field

December 21, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Affiliate Disclosure: 22bulbjungle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Recent Tutorials

How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • htaccess
  • Javascript
  • jQuery
  • PC Tips
  • Photoshop
  • PHP
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.