Skip to content

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>