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

tag withand also add  <h3> tag and <p> 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<meta charset="utf-8">
<img src="2.jpg" alt="">
<h3>What is Lorem Ipsum?
<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>
Step 2) Add CSS CODE IN style tag​
@import url('https://fonts.googleapis.com/css?family=Aguafina+Script&display=swap');
margin: 0;
padding: 0;
background: #F2AA4CFF;
border: 2px solid;
width: 300px;
height: 400px;
margin-left: 300px;
margin-top: 100px;
position: relative;
transition: all 1s;
.box-effect img{
height: 100%;
background: none;
position: absolute;
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;
transform: translatey(-50px);
color: #3FABAF;