Image hover effects CSS using only

Learn how to create image hover effects with animation only using CSS.

We are using image zoom on hover effects max website to show button on hover.

Most of the tutorial using javascript for animation but I am using totally only custom css.

Best css image hover effects with example. I want to show you something truly CSS creativity CSS snippets.

This CSS code is very easy to implement for a web designer. You can use this CSS hover effects on your any type of website.

If you are a web designer then you are the right place you can use anything from this website.

If you are begainer then you can study more details from w3schools and then you can also create this type of css effects.

I share daily CSS tutorial with demo and source file you can check how to create Toggle Buttons create using pure css this tutorial very useful for every web designer.

HTML

<figure class="hover-box">
    <img src="https://source.unsplash.com/user/erondu/800x600" alt="sample89" />
    <figcaption>
        <h3>Buy Now</h3>
    </figcaption>
    <a href="#"></a>
</figure>

<figure class="hover-box">
    <img src="https://source.unsplash.com/user/von_co/800x600" alt="sample89" />
    <figcaption>
        <h3>Read More</h3>
    </figcaption>
    <a href="#"></a>
</figure>
<figure class="hover-box">
    <img src="https://source.unsplash.com/user/daladude/800x600" alt="sample89" />
    <figcaption>
        <h3>Join Us</h3>
    </figcaption>
    <a href="#"></a>
</figure>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600;);
.hover-box {
    background-color: #000;
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    margin: 10px;
    max-width: 315px;
    min-width: 230px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}
.hover-box * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}
.hover-box:before, .hover-box:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    background-color: #000000;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    opacity: 0.9;
    z-index: 1;
}
.hover-box:before {
    -webkit-transform: skew(45deg) translateX(-155%);
    transform: skew(45deg) translateX(-155%);
}
.hover-box:after {
    -webkit-transform: skew(45deg) translateX(155%);
    transform: skew(45deg) translateX(155%);
}
.hover-box img {
    backface-visibility: hidden;
    max-width: 100%;
    vertical-align: top;
}
.hover-box figcaption {
    top: 50%;
    left: 50%;
    position: absolute;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%) scale(0.5);
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    -webkit-box-shadow: 0 0 10px #000000;
    box-shadow: 0 0 10px #000000;
}
.hover-box h3 {
    background-color: #000000;
    border: 2px solid #fff;
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
    padding: 5px 10px;
    text-transform: uppercase;
}
.hover-box a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
}
.hover-box:hover>img, .hover-box.hover>img {
    opacity: 0.5;
}
.hover-box:hover:before, .hover-box.hover:before {
    -webkit-transform: skew(45deg) translateX(-55%);
    transform: skew(45deg) translateX(-55%);
}
.hover-box:hover:after, .hover-box.hover:after {
    -webkit-transform: skew(45deg) translateX(55%);
    transform: skew(45deg) translateX(55%);
}
.hover-box:hover figcaption, .hover-box.hover figcaption {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

2 Comments

  1. […] Learn how to create custom pure CSS lightbox with nice animation effects. […]

  2. I appreciate, cause I found exactly what I was looking for. You’ve ended my 4 day long hunt! God Bless you man. Have a nice day. Bye

Leave a Reply