Image with slide down title on hover

For example, Image with slide down title on hover...

Demo

Image

Lorem Ipsum

Image

Lorem Ipsum


HTML

<figure> 
        <img src="img/switching-img-13.jpg" alt="Image" />
        <figcaption>
                <h2>Lorem<strong> Ipsum</strong></h2>
        </figcaption>
        <a href="#"></a> 
</figure>
<figure> 
        <img src="img/switching-img-15.jpg" alt="Image" />
        <figcaption>
                <h2>Lorem<strong> Ipsum</strong></h2>
        </figcaption>
        <a href="#"></a> 
</figure>

CSS

<style>
        figure { 
                background: #000000; 
                color: #ffffff; 
                text-align: center; 
                width: 31.333%; 
                max-height: 220px; 
                margin: 10px 1%; 
                float: left; 
                position: relative; 
                overflow: hidden;  
                -webkit-box-shadow: 0 0 7px 1px gray;
                -moz-box-shadow: 0 0 7px 1px gray;
                box-shadow: 0 0 7px 1px gray;
        }
        figure * {
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                -webkit-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
        }
        figure img { 
                opacity: 0.4; 
                max-width: 100%; 
                position: relative; 
        }
        figure figcaption { 
                position: absolute; 
                top: 0; 
                left: 0; 
                bottom: 0; 
                right: 0; 
        }
        figure h2 { 
                font-size: 1.7em; 
                font-weight: 400; 
                text-transform: uppercase; 
                background: #000000; 
                display: inline-block; 
                padding-top: 3px; 
                margin: 0; 
                position: absolute; 
                left: 40px; 
                right: 40px; 
                top: 50%;
                -webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
                transform: skew(-10deg) rotate(-10deg) translate(0, -50%);  
        }
        figure:before { 
                content: ''; 
                background: #ffffff; 
                width: 100%; 
                height: 100%; 
                position: absolute; 
                top: 0; 
                left: 0; 
                -webkit-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
                -webkit-transform: skew(-10deg) rotate(-10deg) translateY(-50%);
                transform: skew(-10deg) rotate(-10deg) translateY(-50%);
        }
        figure a { 
                position: absolute; 
                left: 0; 
                right: 0; 
                top: 0; 
                bottom: 0; 
                z-index: 1; 
        }
        figure { 
                background: #123851; 
        }
        figure:hover img,
        figure.hover img { 
                opacity: 1;
                -webkit-transform: scale(1.1);
                transform: scale(1.1);
        }
        figure:hover h2,
        figure.hover h2 { 
                top: 150%; 
        }
        figure:hover:before,
        figure.hover:before {
                -webkit-transform: skew(-10deg) rotate(-10deg) translateY(-150%);
                transform: skew(-10deg) rotate(-10deg) translateY(-150%);
        }
        /* Small Devices, Tablets */
        @media only screen and (max-width : 767px) {
                figure { 
                        width:100%; 
                        margin:0 0 15px; 
                }
        }
</style>

Javascript

/* Demo purposes only */
$(".hover").mouseleave(
        function () {
                $(this).removeClass("hover");
        }
);
  • Share
  • Copyright 2016 by WebiBeris.com. All Rights Reserved.