JSFiddle - React, Tailwind, and code Playground

by Alessio

HTML

<div class="rss-output" style="float:">
<div class="body"> 
    <div class="overlay-feed"></div>
    <div class="imagefix" style="float:none;">
        <a target="_blank" href="#">
            <img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a>
    </div>
    </div>
</div>

CSS

div.rss-output {
    float: left;
    width: 33.333%;
    position: relative;
    padding: 15px !important;
    overflow: hidden;
}

.overlay-feed:hover + div.imagefix img{
    transform: scale(2);
    -webkit-transform: -webkit-scale(2);
}

.rss-output .body {
    width: 100%;
}

.rss-output .overlay-feed {
    background: #000 none repeat scroll 0% 0%;
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 200px;
    opacity: 0.5;
}

div.imagefix {
    height: 200px;
    line-height: 250px;
    overflow: hidden;
    text-align: center;
    width: 100%;
}

div.imagefix img {
    margin: -50%;
    -moz-transition: all 1s cubic-bezier(0.23,1,0.32,1);
    -ms-transition: all 1s cubic-bezier(0.23,1,0.32,1);
    -webkit-transition: all 1s cubic-bezier(0.23,1,0.32,1);
    -o-transition: all 1s cubic-bezier(0.23,1,0.32,1);
    transition: all 1s cubic-bezier(0.23,1,0.32,1);
}