JSFiddle - React, Tailwind, and code Playground

by bertuz

HTML

<div class="test">
    <span class="before"></span>
    <img src="http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG">
</div>

CSS

.test{
    background-color: grey;
    overflow: hidden;
    width: 300px;    
}

.test span.before{
    display: inline-block;
    background-color: red;
    /*how much do we want to crop the image? (in this case the blue div)*/
    padding-top: 200px;
    /*the trick of putting the blue div in the middle is here*/
    vertical-align: middle;
}

.test > img{
    display: inline-block; 
    height: 700px; 
    width: 296px;
    background-color: blue; 
    vertical-align: middle;
    margin: -20000em 0;
}