JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumbnails">
    <div class="thumbnail">
    <div class="image-container">
        <div class="overlay">&nbsp;</div>
    <img src="http://cdn1.bigcommerce.com/server4800/10d13/products/1134/images/4290/pw72_1__15735.1346792984.320.320.jpg" />
        </div>      
        
</div>
<div class="thumbnail">
    <div class="image-container">
        <div class="overlay">&nbsp;</div>    
    <img src="http://cdn1.bigcommerce.com/server4800/10d13/products/1135/images/4662/pw73_1__19670.1347388743.320.320.jpg"
        /></div>
</div>
<div class="thumbnail">
    <div class="image-container">
        <div class="overlay">&nbsp;</div>    
        <img src="http://cdn1.bigcommerce.com/server4800/10d13/products/1137/images/4308/pw75_1__80434.1346793955.320.320.jpg" /></div>
</div>
</div>

CSS

.thumbnails {
    padding: 35px;
}
.thumbnail {
    float:left;
    position:relative;
    width: 70px;
    margin-right: 10px;
}
.thumbnail img{
    /* ... */
    width:70px;
    height:50px;
}    

.thumbnail:hover .image-container {
    position:relative;    
    top:-25px;
    left:-35px;
    width:140px;
    height:140px;    
    z-index:999;    
    border-radius:75px;
    border:1px solid white;  
    overflow: hidden;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.thumbnail:hover img {
    position:relative;
    width:140px;
    height:140px;
    display:block;
}

.thumbnail .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(at 25% 25%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.0) 35%, rgba(0, 0, 0, 0.5) 100%);
  display: none;
}

.thumbnail:hover .overlay {
  display: block;  
  z-index: 1000;
}