JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pic">
					<img src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" width="400" class="images">
					<img src="http://kidoinfo.com/ri/wp-content/uploads/2013/02/School-test.jpg" width="178" class="images1">
					<img src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" width="400" class="images">
					<img src="http://kidoinfo.com/ri/wp-content/uploads/2013/02/School-test.jpg" width="178" class="images1">
			</div>

CSS

.pic {
    display: table;
    height: 277px;
    margin: 0 auto;
    width: 1280px;
}
img.images {
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin: 0 -3px 0 0;
    opacity: 0.4;
    position: relative;
    transition: all 0.3s ease-out 0s;
    vertical-align: middle;
}
img.images1 {
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin: 0 -3px 0 0;
    opacity: 0.4;
    position: relative;
    transition: all 0.3s ease-out 0s;
    vertical-align: middle;
}
img.images:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
    height: 376px;
    margin: -20px;
    opacity: 1;
    transition: all 0.3s ease-in 0s;
    width: 563px;
    z-index: 200;
}
img.images1:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
    height: 401px;
    margin: -20px;
    opacity: 1;
    transition: all 0.3s ease-in 0s;
    width: 267px;
    z-index: 200;
}