JSFiddle - React, Tailwind, and code Playground

by brian

HTML

<div class="image">
  <img src="http://placekitten.com/300/" width="300" height="300"/>
	<div class="overlay">
    <span class="name">Cat</span>
  </div>
</div>
<div class="image">
  <img src="http://placekitten.com/300/350" width="300" height="350"/>
	<div class="overlay">
    <span class="name">Cat</span>
  </div>
</div>
<div class="image">
  <img src="http://placekitten.com/200/210" width="200" height="210"/>
	<div class="overlay">
    <span class="name">Cat</span>
  </div>
</div>

CSS

.image {
    position:relative;
    margin-bottom: 10px;
    display:inline-block;
    }

.overlay {
    display:none;
	}

.overlay:before {
	content: '';
	height: 100%;
	margin-left: -8px;
	display: inline-block;
	vertical-align: middle;
	}

.image:hover .overlay {
	top: 0;
	left: 0;
	width: 100%;
	height: 99%;
	color: white;
	padding: 12px;
	position: absolute;
	text-align: center;
	display: inline-block;
	border: 10px solid black;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background: rgba(255,255,255,.5);
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(49%,transparent), color-stop(49%,#000000), color-stop(50%,transparent)), -webkit-gradient(linear, right top, left bottom, color-stop(49%,transparent), color-stop(49%,#000000), color-stop(50%,transparent));  
    }

.name {
	color: white;
	padding: 7px;
	font-size: 12px;
	background: black;
	text-transform: uppercase;
	display: inline-block;
	vertical-align: middle;
	}