JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Systemy operacyjne</h1>
		<ul>
			<li>
				<img src="http://vignette1.wikia.nocookie.net/nonsensopedia/images/2/25/Blue_Screen_of_AAAAA.jpg/revision/latest?cb=20060415094121" alt="Microsoft Windows"/>
				<h2>Microsoft Windows</h2>
				<span>
					Microsoft Windows (inaczej: Jedyny słuszny system, z ang. Mikromiękkie Okna) – prosty wirus używany w inteligentnych oknach domowych. Jak sama nazwa wskazuje po zainstalowaniu go powinniśmy wyrzucić komputer przez okno. Jako jedyny wyposażony jest w kreator tworzenia błędów, działający całodobowo, 7 dni w tygodniu, 365 w roku. Co niewiarygodne o godzinie 0:01 29 lutego, nawet w jeżeli komputer jest wyłączony, w kreatorze występuje krytyczny błąd, w skutek czego kreator uruchamia się przez 12 godzin.
				</span>
			</li>
			<li>
				<img src="http://vignette1.wikia.nocookie.net/nonsensopedia/images/2/25/Blue_Screen_of_AAAAA.jpg/revision/latest?cb=20060415094121" alt="Linux"/>
				<h2>Linux</h2>
				<span>
					Linux – system operacyjny, który ma jądra, znaczy się jedno jądro, pieszczotliwie zwane <s>kelnerem</s> kernelem. Decydując się na używanie Linuksa, każdy jest zobowiązany dokarmiać sympatycznego pingwinka o wdzięcznym imieniu Tux. Prawdziwi linuksowcy wyprowadzają go nawet na spacery.
				</span>
			</li>
			<li>
				<img src="http://vignette1.wikia.nocookie.net/nonsensopedia/images/2/25/Blue_Screen_of_AAAAA.jpg/revision/latest?cb=20060415094121" alt="MacOS"/>
				<h2>MacOS</h2>
				<span>
					Macintosh (ew. Fuckintosh, Macintoshit lub Macinto$h) – jabłecznik o smaku komputerowym. Jego właściciele jeżdżą wyłącznie swoimi samochodami, bo kto ma na Macintosha, ten ma i na benzynę. Komputer ten jest często wykorzystywany w projektowaniu grafiki, której żaden Pentium nigdy nie uniesie, chociaż Pentiumy są już u szczytu technologicznego rozwoju.
				</span>
			</li>
			<li>
				<img src="http://vignette1.wikia.nocookie.net/nonsensopedia/images/2/25/Blue_Screen_of_AAAAA.jpg/revision/latest?cb=20060415094121"...

CSS

* { margin: 0; padding: 0; outline: 0; cursor: default; }
body {
	background-image: url('http://p1.pichost.me/i/67/1916561.jpg');
	background-attachment: fixed;
	background-size: cover;
	font-family: "Book Antiqua",serif;
}
h1 {
	font-size: 42pt;
	text-shadow: 2px 2px 5px #000;
	text-align: center;
	line-height: 3em;
	color: #fff;
}
ul {
	display: block;
	list-style: none;
	text-align: center;
	margin: 50px 0;
}
ul, ul * {
	transition: all 0.5s;
}
li {
	position: relative;
	display: inline-block;
	list-style: none;
	width: 220px;
	height: 220px;
	background: #fff;
	text-align: center;
	box-sizing: border-box;
	padding: 10px;
	z-index: 1;
	vertical-align: middle;
	transform: scale(0.9) rotatez(3deg);
}
li > img {
	width: 100%;
	max-height: 170px;
}
li > h2 {
	display: block;
	position: absolute;
	width: 200px;
	color: #540;
	text-align: center;
	font-size: 15pt;
	bottom: 8px;
}
li > span {
	position: absolute;
	display: block;
	box-sizing: border-box;
	width: 400px;
	font: 10pt "Verdana",sans-serif;
	overflow: hidden;
	background: #fff;
	color: #000;
	height: auto;
	opacity: 0;
	padding: 10px;
	left: 50%;
	top: 230px;
	margin-left: -200px;
}

ul:hover li {
	opacity: 0.5;
}
ul li:hover {
	transform: scale(1);
	opacity: 1;
	z-index: 5;
	box-shadow: 0 110px 3000px 150px #fff;
}
li:hover > span {
	opacity: 1;
}