我想创建一个像游戏一样的登陆页面.访问者可以选择“专业”或“Speels”.
告诉它很容易,但编程对我来说很难,所以这就是我想要的:
当有人将鼠标悬停在其中一个div上时,我希望背景图像缩放(仅图像),并且div上的不透明度从50%变为80%时,2个div具有2个不同的背景图像.
这就是我想要创建的:
到目前为止我所取得的成就是用背景图像制作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>
请注意,我仍在努力,所以不要说这(当然)不起作用.
解决方法
您可以通过使用带有背景图像的2个div来执行此操作,并在div上使用填充来复制背景图像的宽高比.使用背景大小缩放图像:悬停.然后使用伪元素创建颜色叠加并转换不透明度: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>