Pure css thumbnails hover

This is a sample of lesson.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Pure css thumbnails hover</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <h1>Pure css thumbnails hover</h1>
<ul>
  <li><div>Default</div></li>
  <li><span>1</span><div>First</div></li>
  <li><span>2</span><div>Second</div></li>
  <li><span>3</span><div>Third</div></li>
</ul>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
	background:#888;
}
h1 {
	text-align:center;
}
body,ul,li {
	margin:0;
	paddin:0;
}
ul {
	width:300px;
	height:300px;
	margin:1em auto;
	text-align:center;
	list-style:none;
	position:relative;
}
li {
	position:absolute;
	left:0;
	top:0;
	width:300px;
	height:300px;
	line-height:300px;
}
li div {
	width:300px;
	height:300px;
	font-size:2em;
}
li:nth-child(1) div { background:#fff;color:black; }
li:nth-child(2) div { background:yellow;opacity:0;}
li:nth-child(3) div { background:pink;opacity:0;}
li:nth-child(4) div { background:green;opacity:0;}
li span {
	position:absolute;
	display:block;
	cursor:pointer;
	bottom:-105px;
	width:100px;
	height:100px;
	line-height:100px;
	opacity:0.5;
	-webkit-transition:0.4s;
	-moz-transition:0.4s;
	transition:0.4s;
}
li:nth-child(2) span { background:yellow;left:0; }
li:nth-child(3) span { background:pink;left:100px; }
li:nth-child(4) span { background:green;left:200px; }
li span:hover {
	opacity:1;
	z-index:200;
}
li span:hover + div {
	opacity:1;
	z-index:100;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Pure css thumbnails hover ) is write by keisuke Takahashi, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © keisuke Takahashi