html 甘道夫

Posted 2021-05-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 甘道夫相关的知识，希望对你有一定的参考价值。

h1{
	font-weight: bolder;
	font-size: 50pt;
	text-align: center;
}

.wanted{
	width: 1000px;
	height: 300px;
	display: inline-flex;
}

.reward{
  display: block;
	height: auto;
  margin-left: auto;
  margin-right: auto;
	text-align: center;
}

img{
	width: 300px;
	height: auto;
	filter: opacity(50%);
}

.reward:hover img{
	filter: opacity(100%);
}

.description{
	background-color: rgba(233, 233, 233, 0.8);
  border-radius: 8px;
  font-weight: bold;
  color: white;
  font-size: 20pt;
  width: 250px; 
  z-index : 2;
  position: absolute;
  margin-left: 25px;
  
  
}

.reward:hover .description{
	display: none;
}

.gandalf{
	width: 300px;
	position: absolute;
	margin-top: -150px;
	font-size: 30pt;
	color: white;
}

.reward:hover .gandalf{
	margin-top: -40px;
	font-size: 20pt;
}

span{
	color: orange;
}

<!DOCTYPE html>
<html  lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Wanted</title>
</head>
<body>
	<header>
		<h1>Wanted</h1>
	</header>

	<div class="wanted">
		<div class="reward">
			<p class="description">Reward <span>1000</span> golden coins</p>
			<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf">
			<h2 class="gandalf">Gandalf</h2>
		</div>

		<div class="reward">
			<p class="description">Reward <span>1000</span> golden coins</p>
			<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf">
			<h2 class="gandalf">Gandalf</h2>
		</div>

		<div class="reward">
			<p class="description">Reward <span>1000</span> golden coins</p>
			<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf">
			<h2 class="gandalf">Gandalf</h2>
			
		</div>
		
	</div>

</body>
</html>

以上是关于html 甘道夫的主要内容，如果未能解决你的问题，请参考以下文章

甘道夫怎样在cdh5.2上执行mahout的itemcf on hadoop

css 练习甘道夫 - 寻找宝贵

css 甘道夫