html创建信息登录页面,html – 创建选项选择登录页面

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

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

当有人将鼠标悬停在其中一个div上时,我希望背景图像缩放(仅图像),并且div上的不透明度从50％变为80％时,2个div具有2个不同的背景图像.

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

这就是我想要创建的：

之前

后：

到目前为止我所取得的成就是用背景图像制作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;

}

professioneel

Speels

请注意,我仍在努力,所以不要说这(当然)不起作用.