JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="col-md-3">
    <div class="list-news bg-blue-shadow">
        <article>
            <header>
                <figure>
                    <img class="img-responsive" alt="" src="http://wedesignthemes.com/html/kidslife/images/image5.jpg">
                    <figcaption class="bg-yellow">
                        	<h3>Title</h3>

                        <p>Description</p>
                    </figcaption>
                </figure>
            </header>
        </article>
    </div>
</div>

CSS

.list-news{
    width:500px;
    height:300px;
}
.list-news:hover img {
    -webkit-transform: translateX(-15px) translateY(13px) scale(1.1);
    -moz-transform: translateX(-15px) translateY(13px) scale(1.1);
    -o-transform: translateX(-15px) translateY(13px) scale(1.1);
    -ms-transform: translateX(-15px) translateY(13px) scale(1.1);
    transform: translateX(-15px) translateY(13px) scale(1.1);
}