JSFiddle - React, Tailwind, and code Playground

by shockwave33

HTML

<body>
		<ul class="galerie">
			<li>
				<a href="#" class="thumb">
					<span><img src="images/prvni.jpg" alt="" /></span>
				</a>
				<h2>Kostel</h2>
			</li>
			<li>
				<a href="#" class="thumb">
					<span><img src="images/druhy.jpg" alt="" /></span>
				</a>
				<h2>Zámek</h2>
			</li>
			<li>
				<a href="#" class="thumb">
					<span><img src="images/treti.jpg" alt="" /></span>
				</a>
				<h2>Socha</h2>
			</li>
			<li>
				<a href="#" class="thumb">
					<span><img src="images/ctvrty.jpg" alt="" /></span>
				</a>
				<h2>Žně</h2>
			</li>
			<li>
				<a href="#" class="thumb">
					<span><img src="images/paty.jpg" alt="" /></span>
				</a>
				<h2>Pokosené</h2>
			</li>
			<li>
				<a href="#" class="thumb">
					<span><img src="images/sesty.jpg" alt="" /></span>
				</a>
				<h2>Slunečnice</h2>
			</li>
		</ul>
	</body>

CSS

body {
	margin: 50px;
	background-color: #FFFFFF;
	font-size: 11px;
	font-family: Verdana;
}

h1 {
	font-family: Verdana;
	font-size: 16px;
	color: #333300;
}

img {
	border: none;
}

ul.galerie {
	width: 708px;
	list-style: none;
	margin: 0 auto; padding: 0;
}

ul.galerie li {
	float: left;
	margin: 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	display: inline;
}

ul.galerie li a.thumb {
	width: 204px;
	height: 182px;
	padding: 5px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}

ul.galerie li span { 
	width: 204px;
	height: 182px;
	overflow: hidden;
	display: block;
}

ul.galerie li a.thumb:hover {
	background: #333;
}

ul.galerie li h2 {
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px;
	background: #f0f0f0;
	border-top: 1px solid #fff;
}

ul.galerie li a { 
	text-decoration: none; 
	color: #777; 
	display: block;
}

JavaScript

$(document).ready(function() {
	$("ul.galerie li").hover(function() {
		var thumb = $(this).find("img").attr("src");

		$(this).find("a.thumb").css({
			'background': 'url('+thumb+')no-repeat bottom' 
		});

		$(this).find("span")
			   .stop()
			   .fadeTo('normal', 0);
	}, function() {
		$(this).find("span")
			   .stop()
			   .fadeTo('normal', 1)
			   .show();
	});
});