Gibson Hover Effect

by will525

HTML

<div class="card-wrapper card-wrapper--active">
    <a href="#" class="card-wrapper__card card-wrapper__flipped">
        <figure class="card-wrapper__back">
            <img src="http://mustafademirkent.com/images/2.jpg" alt="">
                <div class="card-wrapper__back__info">
                    <h3>Suits</h3>
                    <span class="card-wrapper__back__info__line">&nbsp;</span>
                    <h4>Shop Now</h4>
                </div>
            </figure>
        </a>
    </div>
    
    <div class="card-wrapper card-wrapper--active">
        <a href="#" class="card-wrapper__card card-wrapper__flipped">
            <figure class="card-wrapper__back">
                <img src="http://www.e-architect.co.uk/london/jpgs/emirates_stadium_hok040108_c_huftoncrow_2.jpg" alt="">
                    <div class="card-wrapper__back__info">
                        <h3>Suits</h3>
                        <span class="card-wrapper__back__info__line">&nbsp;</span>
                        <h4>Shop Now</h4>
                    </div>
                </figure>
            </a>
        </div>
        
        
        
            <div class="card-wrapper card-wrapper--active">
        <a href="#" class="card-wrapper__card card-wrapper__flipped">
            <figure class="card-wrapper__back">
                <img src="http://www.nflteamhistory.com/images/stadiums/big/tampa_bay_buccaneers.jpg" alt="">
                    <div class="card-wrapper__back__info">
                        <h3>Suits</h3>
                        <span class="card-wrapper__back__info__line">&nbsp;</span>
                        <h4>Shop Now</h4>
                    </div>
                </figure>
            </a>
        </div>

CSS

*,*:after,*:before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    padding:0;margin:0
}
.card-wrapper {
    -webkit-perspective:800;
    -moz-perspective:800;
    -ms-perspective:800;
    -o-perspective:800;
    perspective:800;
    position:relative;
    float:left;
}

.card-wrapper__card {
    -webkit-transition:all 600ms cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition:all 600ms cubic-bezier(0.19, 1, 0.22, 1);
    -ms-transition:all 600ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition:all 600ms cubic-bezier(0.19, 1, 0.22, 1);
    transition:all 600ms cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    position:relative;
    float:left;
    width:100%;
    height:100%;
    border:none}

.card-wrapper__card.card-wrapper__flipped {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    transform:rotateY(180deg)}

.card-wrapper__card .card-wrapper__back {
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
    display:block;
    height:100%;
    width:100%;
    line-height:300px;
    color:white;
    text-align:center;
    font-weight:bold;
    font-size:140px
}

.card-wrapper__card .card-wrapper__back img {
    border:none;
    display:block
}

.card-wrapper__card .card-wrapper__back{
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    transform:rotateY(180deg);
    background:#ECF0F1
}

.card-wrapper__card .card-wrapper__back .card-wrapper__back__info {
   ...