JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 <div class="row">
        <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
            <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
            <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
            <div class="col-md-4 header" ><img src="http://www.mandroid.in/demo/srems/images/news_image_01.jpg" /></div>
</div>

CSS

body {
    height:1000px;
    width:100%;
    background-color:#F0F0F0;
}

#header_div {
    width:100%;
    height:100px;
    position:fixed;
    top:0;
    left:0;
}
#header_div img {
    max-height: 100%;
    max-width: 100%;
}

JavaScript

$(document).ready(function () {
       $(".header").mouseleave(function () {
           $(".header").animate({
               height: "50px"
           }, 600);
       });

       $(".header").mouseenter(function () {
           $(".header").animate({
               height: "100px"
           }, 600);
       });
   })