JSFiddle - React, Tailwind, and code Playground

by yelton

HTML

<div class="wrapper">
    <div class="box" style="background-image:url(http://imwiththebrand.files.wordpress.com/2009/12/40.jpg);">
        This is box
    </div>
    <div class="box" style="background-image:url(http://thechive.files.wordpress.com/2013/03/truthful-movie-posters-33.jpg?w=500&h=741);">
        This is box
    </div>
    <div class="box" style="background-image:url(http://static.comicvine.com/uploads/original/4/49448/1670871-captain_america_movie_poster.jpg);">
        This is box
    </div>
</div>
<hr>
@eltonjain

CSS

.box {
    width:200px;
    height:400px;
    display:inline-block;
    background:orange;
    float:left;
    color:transparent;
    margin-left:-1px;
    background-size:cover !important;
    z-index:50;
    
}
.box:hover {
    -webkit-transform:scale(1.1);
     z-index:50;
    box-shadow:0px 0px 5px rgba(0,0,0,0.8);
    -webkit-transition:all ease 0.3s;
}
.box:first-child:hover {
        -webkit-transform-origin:0% 50%;
}
.box:last-child:hover {
        -webkit-transform-origin:100% 50%;
}
.wrapper {
    background:black;
    height:400px;
    width:600px;
}
.wrapper:hover .box {
    background-color:rgba(0,0,0,0.8);
  
    z-index:0 !important;
}
.wrapper:hover .box:hover {
    background:orange;
    opacity:5;
    z-index:50 !important;

}