JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">
    <img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg"/>
</div>

CSS

body {height: 100%; width: 100%; background: brown;}

.image {padding: 50px; position: relative; top: 100px; left: 100px; height: 200px; width: 300px;
    -webkit-transition: background 1s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
.image:hover {background: rgba(255,255,255,0.4)}

.image img {height: 200px; width: 300px;}