JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<section class="list-cover">
    <figure>
				<a href="" title="">
					<img src="http://placekitten.com/g/200/300" alt="" />
					<figcaption>Caption Text</figcaption>
				</a>
				</figure>
				<figure>
				<a href="" title="">				
				<img src="http://placekitten.com/g/200/300" alt="" />
					<figcaption>Caption Text</figcaption>
				</a>
				</figure>
				<figure>				
				<a href="" title="">				
				<img src="http://placekitten.com/g/200/300" alt="" />
					<figcaption>Caption Text</figcaption>
				</a>
				</figure>
				<figure>				
				<a href="" title="">				
				<img src="http://placekitten.com/g/200/300" alt="" />
					<figcaption>Caption Text</figcaption>
				</a>
				</figure>
				<figure>				
				<a href="" title="">				
				<img src="http://placekitten.com/g/200/300" alt="" />
					<figcaption>Caption Text</figcaption>
				</a>
				</figure>
    </section>

CSS

.list-cover figure {
    display: inline-block;
    margin: .2em;
    position:relative;
    -webkit-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
    max-height: 315px;
    min-height: 315px;
}
.list-cover figure:hover, .list-cover figure:active {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    z-index:10;
}
.list-cover figcaption {
    background: rgba(46, 204, 113, .7);
    margin-top: -30%;
    position: relative;
    padding: .5em;
    padding-top: 1.1em;
    -webkit-transition: background-color .3s ease;
    transition: background-color .3s ease;
}
.list-cover figure:hover figcaption, .list-cover figure:active figcaption {
    background-color: #ec008c;
}
.list-cover a {
    color: #fff;
}