我想创建一个像游戏一样的登陆页面.访问者可以选择“专业”或“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
请注意,我仍在努力,所以不要说这(当然)不起作用.