html - 创建一个选项选择登陆页面

Question

我想创建一个像游戏一样的着陆页。访问者可以选择“Professioneel”或“Speels”。

说起来容易，但编程对我来说很难，所以这就是我想要的:

2 div 有 2 个不同的 background-image 当有人 hover 在其中一个 div 我想要 background-图片 缩放(仅限图片)，div 上的不透明度 从50% 更改为80%。

真正美好的 future 是在图像上显示下雪的 gif。

这就是我要创建的:

之前

之后:

到目前为止，我所取得的成就是用 background-image 制作 2 个 div，我什至不确定这是否是正确的方法。 有人可以帮帮我吗？

这是当我将鼠标悬停在当前代码上时发生的情况:(整个 div 缩放，而不仅仅是图像)

根据用户的要求，这里有一些代码:

#containerEntree {
  height: 100vh;
  width: 1920px;
  padding-left: 0;
  padding-right: 0;
}

#professioneelContainer {
  background-color: red;
  text-align: center;
  width: 1920px;
  height: 475px;
}

#speelsContainer {
  background: red;
  width: 100%;
  height: 475px;
  text-align: center;
}

.entreeTekst:hover {
  transform: scale(1.2);
}

.entreeTekst {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all .5s;
  margin: auto;
}

.entreeTekst > span {
  color: white;
  /* Good thing we set a fallback color! */
  font-size: 70px;
  position: absolute;
}

<div class="container" id="containerEntree">
  <div id="professioneelContainer">
    <div class="entreeTekst">
      <span>professioneel</span>
      <img src="img/professioneel.jpg" />
    </div>
  </div>
  <div id="speelsContainer">
    <div class="entreeTekst">
      <span>Speels</span>
      <img src="img/speels.jpg" />
    </div>
  </div>
</div>

请注意，我仍在努力，所以不要说这(当然)行不通。

Answer 1

您可以通过使用 2 个带有背景图像的 div 并在 div 上使用填充来复制背景图像的纵横比来实现这一点。在 :hover 上使用 background-size 缩放图像。然后使用一个伪元素创建颜色叠加层并在 :hover 上转换不透明度，然后在上面使用另一个伪元素，将文本和“snow”gif 作为背景。

body {
  width: 600px;
  max-width: 80%;
  margin: auto;
}
div {
  background: url('https://static.tripping.com/uploads/image/0/5240/towns-funny-names-us_hero.jpg') center center no-repeat / 100%;
  height: 0;
  padding-bottom: 33.33333%;
  position: relative;
  transition: background-size .25s;
}
.speel {
  background-image: url('http://www.luketingley.com/images/large/The-Punchbowl-Web-Pano.jpg');
}
div::after, div::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
div::before {
  opacity: .5;
  transition: opacity .25s;
}
.pro::before {
  background: blue;
}
.speel::before {
  background: red;
}
div::after {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: sans-serif;
  font-size: 1.5em;
  font-weight: bold;
}
.pro::after {
  content: 'PROFESSIONEEL';
}
.speel::after {
  content: "SPEELS";
}

div:hover::after {
  background: url('https://media.giphy.com/media/26BRyql7J3iOx875u/giphy.gif') center center no-repeat / cover;
}
div:hover::before {
  opacity: 0.8;
}
div:hover {
  background-size: 150%;
}

<div class="pro">
</div>
<div class="speel">
</div>