css 甘道夫

Posted

tags:

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

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Gandalf</title>

    <!-- Link CSS -->
    <link rel="stylesheet" type="text/css" href="main.css">
    <!-- Link Google Font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800">
</head>

<body>
    <div class="overlay">
        <h1>Gandalf</h1>
        <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf">
        <p>reward <span>1000</span><br> golden coins</p>
    </div>
</body>

</html>
/**** Global css ****/
body {
    color: #000;
    font-family: 'Open Sans';
}

/**** Overlay ****/
.overlay {
    position: relative;
    cursor: pointer;

}

.overlay img {
    position: absolute;
    width: 500px;
    height: 572px;
    opacity:0.7;
}

.overlay:hover img {
    opacity: 1;
}

.overlay h1 {
    position: absolute;
    width: 500px;
    font-size: 3rem;
    color: #fff;
    top: 300px;
    text-align: center;
    z-index: 1;
}

.overlay:hover h1 {
    font-size: 2rem;
    font-weight: 500;
    color: #fff;
    top: 450px;
}

.overlay p {
    position: absolute;
    text-align: center;
    left: 9%;
    padding: 1% 5%;
    border-radius: 20px;
    font-size: 2.4rem;
    background-color:#fff;
    color: #000;
    opacity: 0.8;
    z-index: 2;
}

.overlay:hover p {
    visibility: hidden;
}

p span {
    color: #FF6600;
}

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

css 甘道夫

css 甘道夫

css 甘道夫

css 甘道夫想要

html 甘道夫

html 甘道夫