Pure css thumbnails hover

This is a sample of lesson. What is a pure css thumbnails hover How do you make a pure css thumbnails hover? This script and codes were developed by Keisuke Takahashi on 23 January 2022, Sunday.

How do I make an pure css thumbnails hover?
  1. Pure css thumbnails hover Previews
  2. Pure css thumbnails hover HTML Codes
  3. Pure css thumbnails hover CSS Codes
Pure css thumbnails hover Previews

Pure css thumbnails hover HTML Codes

<!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>

Pure css thumbnails hover CSS Codes

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;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.