CSS IMAGE HOVER EFFECTS

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 class=”loader” and create a tag with class=”content-affect”and also add  <h3> tag and <p> 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box-effect">
<img src="2.jpg" alt="">
<div class="content-effect">
<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>

Leave a Reply

Your email address will not be published. Required fields are marked *