创建选项选择登录页面

Question

我想创建一个像游戏一样的登陆页面.访问者可以选择"专业"或"Speels".

告诉它很容易,但编程对我来说很难,所以这就是我想要的:

2 div的与2个不同的background-image,当有人hover在我想要的div之一background-image是按比例的(仅图像)和opacity放置在div来从改变50%到80%.

一个非常美好的未来将是在图像上显示一个降雪gif.

这就是我想要创建的:

之前

后:

我已经实现到现在正在2个divs的一个background-image,我甚至不知道这是正确的方式.有人可以帮帮我吗？

当我用当前代码悬停时会发生这种情况:(整个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上使用填充来复制背景图像的宽高比.使用background-size开启缩放图像:hover.然后使用伪元素创建颜色叠加并转换不透明度: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>