css 甘道夫想要

Posted 2021-05-13

tags:

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

<!DOCTYPE html>
<html>
    
            <head>
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <link href="style.css" rel="stylesheet">
                            
	       <meta charset="utf-8">
	       <title>Gandalf</title>
	       <link rel="stylesheet" type="text/css" href="gandalf.css">
            </head>
    
    
    
    
  <body>

    <div class="gandalf">
        
          <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf">
          <div class="top-reward">reward <span class="orange">1000</span><br>golden coins</div>
          <div class="bottom-gandalf">Gandalf</div>
        
    </div>

  </body>
    
</html>


img {
  opacity: 0.5;
  width: 100%;
  height: 100%;
}

.gandalf {
  position:relative;
  width:300px;
  height: 350px;
}

.top-reward {
  position: absolute;
  left : 2%;
  top: 2%;
  height: 25%;
  width: 95%;
  font-size: 30px;
  text-align: center;
  border-style: solid;
  border: 1px;
  border-radius: 10px;
  background-color: rgba(250,250,250,0.8);
}

.bottom-gandalf {
  position: absolute;
  font-size: 45px;
  color: white;
  text-align: center;
  left :20%;
  top: 48%;
}

.orange {
  color: orange;
}

.gandalf:hover .top-reward{
  opacity: 0;
}

.gandalf:hover .bottom-gandalf {
  font-size: 20px;
  text-align: center;
  left: 33%;
  top: 85%;
}

.gandalf:hover img {
  opacity:1;
}

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

css 甘道夫

html 甘道夫