html - 两个图像悬停效果css
问题描述
我有两个图像,一个在另一个之上,当你将鼠标悬停在它上面时,会有一个整洁的过渡。
我有一个问题,我无法让我的图像粘在我创建的虚线框中(见我的小提琴)......
如果你能看看我的小提琴,它会解释我糟糕的措辞......
正如您在我的示例中看到的那样,我希望我的显示器可以留在我的虚线框中。目前,当您向下/向上滚动时,监视器会退出它(在它下面..)
甚至可以在没有固定背景位置的情况下使用纯 css 吗?如果不是,是什么?
任何帮助,将不胜感激。
body {
height: 1000px;
}
.w {
border: dotted;
margin: 0 auto;
white-space: nowrap;
max-width: 261px;
width: 100%;
height: 212px;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
background: rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD.jpg?fit=crop&fm=jpg&h=1080&q=75&w=1920") repeat fixed;
background-position: 50% 100%;
background-repeat: none;
background-size: cover;
z-index: 5;
font-size: 0;
}
.i {
width: 40px;
height: 100%;
display: inline-block;
position: relative;
z-index: 4;
padding: 2px;
transition: all 5.3s ease-in-out;
background: rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD1.jpg?fit=crop&fm=jpg&h=1080&q=75&w=1920") repeat fixed;
background-size: cover;
background-repeat: none;
background-position: 50% 100%;
border-radius: 0%;
}
.i:hover {
-webkit-transition: all 0s linear;
transition: all 0s linear;
opacity: 0;
}
<body>
<div class="w">
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
</div>
</body>
解决方案
这是一个使用伪元素和剪辑路径的想法:
.w {
border: dotted;
margin: 0 auto;
width: 264px;
height: 200px;
position: relative;
display: flex;
background:
rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD.jpg?fit=crop&fm=jpg&h=1080&q=75&w=1920")
top/auto 150% no-repeat; /* this should be the same as */
}
.i {
width: 100%;
clip-path: inset(0);
}
.i::before {
content: "";
position: absolute;
opacity: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD1.jpg?fit=crop&fm=jpg&h=1080&q=75&w=1920")
top/auto 150% no-repeat; /* this! */
transition: all 5.3s ease-in-out;
}
.i:hover::before {
opacity: 0;
transition: all 0s ease-in-out;
}
<div class="w">
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
</div>
推荐阅读
- python-3.x - Django 在调用 save() 时更新模型而不是插入
- excel - 将单元格中的前 3 个字符固定为整列,例如 PRT,这些单元格中的任何新输入都将在 PRT 之后填充,因此 PRT1253
- angular - 用于注入其他服务的服务的 Angular 单元测试
- python - 如何正确转换日期时间以将其用作文件的标题?
- phpspreadsheet - phpspreadsheet中的辅助y轴
- python - 如何使用 Pyrogram 查看存档聊天
- java - java.sql.timestamp 转换为 oracle 数组减少 1 小时
- jose - 错误:导入“pem”密钥时没有密钥导入程序
- powershell - Powershell 条件
- javascript - 正则表达式提取 - 混合十进制分隔符