Image and title with bordered caption on hover

For example, Image and title with bordered caption on hover...

Demo

Image

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image

Lorem Ipsum

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque


HTML

<figure class="bordered-caption"> <img src="img/switching-img-10.jpg" alt="Image" />
        <figcaption>
                    <div class="heading">
                            <h2>Lorem <strong> Ipsum</strong></h2>
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </figcaption>
            <a href="#"></a> 
    </figure>
    <figure class="bordered-caption"><img src="img/switching-img-12.jpg" alt="Image" />
            <figcaption>
                    <div class="heading">
                            <h2>Lorem <strong> Ipsum</strong></h2>
                    </div>
                    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque</p>
            </figcaption>
            <a href="#"></a> 
</figure>

CSS

<style>
    figure.bordered-caption { 
            background: #000000; 
            color: #FFFFFF; 
            text-align: center; 
            position: relative; 
            float: left; 
            overflow: hidden; 
            margin: 10px 1%; 
            max-height: 310px; 
            width: 48%;  
            -webkit-box-shadow: 0 0 7px 1px gray;
            -moz-box-shadow: 0 0 7px 1px gray;
            box-shadow: 0 0 7px 1px gray;
    }
    figure.bordered-caption * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: all 0.45s ease-in-out;
            transition: all 0.45s ease-in-out;
    }
    figure.bordered-caption img { 
            max-width: 100%; 
            width: 100%; 
            position: relative; 
            opacity: 0.9; 
    }
    figure.bordered-caption figcaption { 
            border: 1px solid white; 
            border-width: 0 1px 1px; 
            position: absolute; 
            top: 45%; 
            left: 7%; 
            right: 7%; 
            bottom: 45%; 
    }
    figure.bordered-caption .heading {
            overflow: hidden;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    }
    figure.bordered-caption h2 { 
            font-weight: 400; 
            text-transform: uppercase; 
            text-align: center; 
            display: table; 
            width: auto; 
            margin: 0 auto; 
            padding: 0 10px; 
            position: relative; 
    }
    figure.bordered-caption h2:before,
    figure.bordered-caption h2:after { 
            content: ''; 
            display: block; 
            background: #FFFFFF; 
            width: 1000%; 
            height: 1px; 
            position: absolute; 
            top: 50%; 
    }
    figure.bordered-caption h2:before { 
            left: -1000%; 
    }
    figure.bordered-caption h2:after { 
            right: -1000%; 
    }
    figure.bordered-caption p { 
            font-size: 0.9em; 
            font-weight: 500; 
            width: 100%; 
            padding: 0 20px; 
            margin: 0; 
            position: absolute; 
            top: 50%; 
            opacity: 0; 
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    }
    figure.bordered-caption a { 
            position: absolute; 
            left: 0; 
            right: 0; 
            top: 0; 
            bottom: 0; 
            z-index: 1; 
    }
    figure.bordered-caption:hover img,
    figure.bordered-caption.hover img { 
            opacity: 0.25;
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
    }
    figure.bordered-caption:hover figcaption,
    figure.bordered-caption.hover figcaption { 
            top: 7%; 
            bottom: 7%; 
    }
    figure.bordered-caption:hover p,
    figure.bordered-caption.hover p { 
            opacity: 1;
            -webkit-transition-delay: 0.35s;
            transition-delay: 0.35s;
    }
    /* Small Devices, Tablets */
    @media only screen and (max-width : 767px) {
            figure.bordered-caption { 
                    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.