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

19 thoughts on “Image Hover Effect 1 KTechBlog.com

  1. Youre so cool! I dont suppose Ive read anything like this before. So nice to find any individual with some authentic ideas on this subject. realy thank you for beginning this up. this website is something that is wanted on the internet, someone with a little originality. useful job for bringing one thing new to the internet!

  2. Youre so cool! I dont suppose Ive read anything like this before. So nice to find any individual with some authentic ideas on this subject. realy thank you for beginning this up. this website is something that is wanted on the internet, someone with a little originality. useful job for bringing one thing new to the internet!

  3. There are some interesting points in time in this article however I don’t know if I see all of them heart to heart. There’s some validity but I will take maintain opinion till I look into it further. Good article , thanks and we would like more! Added to FeedBurner as nicely

  4. Youre so cool! I dont suppose Ive read anything like this before. So nice to find any individual with some authentic ideas on this subject. realy thank you for beginning this up. this website is something that is wanted on the internet, someone with a little originality. useful job for bringing one thing new to the internet!

  5. Perfect update of captchas solving package “XEvil 4.0”:
    captcha solving of Google (ReCaptcha-2 and ReCaptcha-3), Facebook, BitFinex, Bing, Hotmail, SolveMedia, Yandex,
    and more than 8400 another types of captcha,
    with highest precision (80..100%) and highest speed (100 img per second).
    You can use XEvil 4.0 with any most popular SEO/SMM programms: iMacros, XRumer, GSA SER, ZennoPoster, Srapebox, Senuke, and more than 100 of other software.

    Interested? You can find a lot of demo videos about XEvil in YouTube.

    FREE DEMO AVAILABLE!

    Good luck 😉

  6. A formidable share, I simply given this onto a colleague who was doing just a little analysis on this. And he in reality bought me breakfast as a result of I discovered it for him.. smile. So let me reword that: Thnx for the treat! However yeah Thnkx for spending the time to debate this, I feel strongly about it and love studying extra on this topic. If possible, as you develop into expertise, would you mind updating your blog with more particulars? It’s extremely helpful for me. Large thumb up for this blog publish!

Leave a Reply

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