JSFiddle - React, Tailwind, and code Playground

HTML

<section id="screenshots">
    <div class=" col-sm-4" id="myDiv">
        <img src="http://es.globalvoicesonline.org/wp-content/uploads/2013/02/DSC_8071-375x288.jpg" class="img-responsive enlarge" id="main-image" alt="edgescan assets screen">
    </div><!--services box-->
    <div class="col-xs-12 hidden-lg"><br /></div>
    
</section>

CSS

#myDiv {
    -ms-transform: skewY(170deg); /* IE 9 */
    -webkit-transform: skewY(170deg); /* Safari */
    transform: skewY(170deg); /* Standard syntax */
    height: auto;
}

.enlarge {
  position: relative;
  z-index: 1
}

.enlarge:hover {
  -ms-transform: skewY(10deg) scale(2, 2); /* IE 9 */
    -webkit-transform: skewY(10deg) scale(2, 2); /* Safari */
    -moz-transform: skewY(10deg) scale(2, 2); /* Safari */
    transform: skewY(10deg) scale(2, 2); /* Standard syntax */
    transform-origin:0 0;
}