css 练习甘道夫 - 寻找宝贵

Posted 2021-05-13

tags:

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="style.css">
		<title>Find The Precious</title>
	</head>
	<body>
    
				<!-- Gandalf exercice-->

				<div class="figureimage">
					<div class="figuredescription">
						Gandalf
					</div>
		            <div class="reward">
		            	reward <span class="textorange">1000</span><br/>golden coins
		            </div>
	            </div>	       
	       
				<!-- Gandalf exercice -->

	</body>
</html>

.figureimage{
	width: 500px;
    height: 572px;
    background: url('http://images.innoveduc.fr/integration_gandalf.png') no-repeat;
    position: relative;
    opacity: 0.7;
}

.figureimage:hover{
	opacity: 1;
}

.figureimage:hover .figuredescription{
	font-family: sans-serif;
	position: absolute;
    bottom: 20px;
    width: 100%;
    color: white;
    font-size: 2.8em;
    text-align: center;
    font-weight: 100;
}

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

.figuredescription{
	font-family: sans-serif;
	position: absolute;
    bottom: 180px;
    width: 100%;
    color: white;
    font-size: 5.5em;
    text-align: center;
    font-weight: 100;
}

.reward{
	font-family: sans-serif;
	position: absolute;
    bottom: 413px;
    width: 60%;
    color: black;
    font-size: 3em;
    font-weight: 100;
    text-align: center;
    padding: 20px 75px 20px 75px;
    border-radius: 12px;
    margin: 0 auto;
	left: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.7);
}

.textorange{
	color: #FE6906;
}

以上是关于css 练习甘道夫 - 寻找宝贵的主要内容，如果未能解决你的问题，请参考以下文章