Skip to content


    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">
    <meta charset="utf-8">
    <div class="box-effect">
    <img src="2.jpg" alt="">
    <div class="content-effect">
    <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('');
    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;