JSFiddle - React, Tailwind, and code Playground

by Travis Harris

HTML

<div class="kozossegitag">
<div class="reszletek">
<span>Koren Miklós</span>
</div>
</div>

CSS

.kozossegitag {
    position:relative;
	content: "";
	display: block;
	width: 100%;
    height: 0;
	padding-top: 100%;
	background: url(http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/koren_miklos.jpg);
	background-size: cover;
	overflow: hidden
}

.reszletek {
    position:absolute;
	width: 100%;
    height: 100%;
    top:0;
    left:0;
	background-color: rgba(67,85,103,0.7);
	opacity: 0;
}

.kozossegitag:hover .reszletek {
    background-color: rgba(67,85,103,0.5);
    opacity: 1;
    -webkit-transition: opacity .25s ease;
	-moz-transition: opacity .25s ease;
}