CSS Image Hover Effects
if you want to create a loader for your website or any collage project that you can use for your project,. you can follow the following project
First, you create a div with and create a
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <img src="2.jpg" alt=""> <div> <h3>What is Lorem Ipsum? </h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> </div> </body> </html>
Step 2) Add CSS CODE IN style tag
<style>
@import url('https://fonts.googleapis.com/css?family=Aguafina+Script&display=swap');
body{
margin: 0;
padding: 0;
background: #F2AA4CFF;
}
.box-effect{
border: 2px solid;
width: 300px;
height: 400px;
margin-left: 300px;
margin-top: 100px;
position: relative;
transition: all 1s;
}
.box-effect img{
width:100%;
height: 100%;
}
.content-effect{
background: none;
position: absolute;
top:0%;
left: 0%;
width: 100%;
height: 100%;
font-size: 18px;
font-family: 'Aguafina Script', cursive;
color: #ffff;
padding: 50px;
text-align: center;
cursor: pointer;
box-sizing: border-box;
}
.box-effect:hover{
transform: translatey(-50px);
color: #3FABAF;
}
</style>
