JSFiddle - React, Tailwind, and code Playground

by qolami

HTML

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

CSS

.image {
    position: relative;
    border: 1px solid black;
    width: 200px;
    height: 200px;
}

.image img {
    max-width: 100%;
    max-height: 100%;
    
    transition: .2s all;
}

.image img:hover {
    -webkit-filter: brightness(50%);
}