JSFiddle - React, Tailwind, and code Playground

by cornelas

HTML

<ul id="galleries">
    <li class="clip"><a href="http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png" rel="lightbox"><img src="http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png"/></a></li>
        <li class="clip"><a href="http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png" rel="lightbox"><img src="http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png"/></a></li>
        <li class="clip"><a href="http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png" rel="lightbox"><img src="http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png"/></a></li>
    </ul>

CSS

.clip {
position: relative;
    overflow: hidden;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: relative;
top: -50%;
left: -15%;
}