Image Hover Effect 1 KTechBlog.com

Now we make Tutorial on Image Hover Effect in KTechBlog.com

HTML Code

<div class="container">
        <div class="content">
            <div class="overlay"></div>
            <img class="image" src="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2017/12/Screen-Shot-2017-12-04-at-10.39.57.png">
            <div class="details fade-top">
                <h3 class="title">Your Title</h3>
                <p class="text">Type Your Description</p>
            </div>
        </div>
    </div>
    
    <div class="container">
        <div class="content">
            <div class="overlay"></div>
            <img class="image" src="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2017/12/Screen-Shot-2017-12-04-at-10.39.57.png">
            <div class="details fade-bottom">
                <h3 class="title">Your Title</h3>
                <p class="text">Type Your Description</p>
            </div>
        </div>
    </div>
    
    <div class="container">
        <div class="content">
            <div class="overlay"></div>
            <img class="image" src="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2017/12/Screen-Shot-2017-12-04-at-10.39.57.png">
            <div class="details fade-left">
                <h3 class="title">Your Title</h3>
                <p class="text">Type Your Description</p>
            </div>
        </div>
    </div>
    
    <div class="container">
        <div class="content">
            <div class="overlay"></div>
            <img class="image" src="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2017/12/Screen-Shot-2017-12-04-at-10.39.57.png">
            <div class="details fade-right">
                <h3 class="title">Your Title</h3>
                <p class="text">Type Your Description</p>
            </div>
        </div>
    </div>

CSS Code

.container{
    width:25%;
    float:left;
}

.content{
    position:relative;
    width:90%;
    max-width:400px;
    margin:auto;
    overflow:hidden 
}

.content .overlay{
    background:rgba(0,0,0,0.7);
    position:absolute;
    height:99%;
    width:100%;
    opacity:0;
    transition:all 0.4s ease-in-out 0s;
}

.content:hover .overlay{
    opacity:1;
}

.image{
    width:100%
}

.details{
    position:absolute;
    text-align:center;
    padding-left:1em;
    padding-right:1em;
    width:100%;
    top:50%;
    left:50%;
    opacity:0;
    transform:translate(-50%,-50%);
    transition:all 0.3s ease-in-out;
}

.content:hover .details{
    top:50%;
    left:50%;
    opacity:1;
}

.details h3{
    color:#fff;
    font-weight:bold;
    letter-spacing:0.15em;
    text-transform:uppercase;
}

.details p{
    color:#fff;
}

.fade-top{
    top:20%
}

.fade-bottom{
    top:80%;
}

.fade-left{
    left:20%;
}

.fade-right{
    left:80%
}

For More Detail Watch this Video

Leave a Reply

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