html - 悬停时如何使 div 网格元素成为链接并与图像叠加?
问题描述
我有以下 HTML 和 CSS 代码:
#project_section{
display: grid;
grid-template-columns: 300px 300px;
grid-template-rows: 300px 300px;
grid-column-gap: 150px;
grid-row-gap: 60px;
justify-content: center;
}
#box-1{
background: LightSkyBlue;
color: white;
border-color: black;
border-style: solid;
}
#box-2{
background:LightSalmon;
color: white;
border-color: black;
border-style: solid;
}
#box-3{
background:PaleTurquoise;
color: white;
border-color: black;
border-style: solid;
}
#box-4{
background:PaleGreen;
color: white;
border-color: black;
border-style: solid;
}
.project_name{
text-align: center;
position: relative;
top: 30%;
font-size: 30px;
}
<div id = project_section>
<div id = "box-1"><p class = "project_name">link 1</p></div>
<div id = "box-2"><p class = "project_name">link 2</p></div>
<div id = "box-3"><p class = "project_name">link 3</p></div>
<div id = "box-4"><p class = "project_name">link 4</p></div>
</div>
我希望在悬停时在我的网格中的每个 div“框”上显示一个图像(与它下面的现有框具有相同的尺寸),单击此图像将带您到一个链接。
我已经尝试将每个 div 框包装在一个锚标记中,并以 href = "#" 作为开始,但是这些框奇怪地调整了大小。
解决方案
这是你想要达到的目标吗?希望这可以帮助。
#project_section{
display: grid;
grid-template-columns: 300px 300px;
grid-template-rows: 300px 300px;
grid-column-gap: 150px;
grid-row-gap: 60px;
justify-content: center;
}
.box {
color: white;
border-color: black;
border-style: solid;
position: relative;
display: flex;
justify-content: center;
align-items: center;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.box-1{
background: LightSkyBlue;
}
.box-2{
background:LightSalmon;
}
.box-3{
background:PaleTurquoise;
}
.box-4{
background:PaleGreen;
}
.project_name{
position: absolute;
font-size: 30px;
z-index: 1;
margin: 0;
}
.box:hover {
cursor: pointer;
background: transparent;
}
.box:hover .project_link{
opacity: 1;
}
.project_link {
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.project_image {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
}
.project_link:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
<div id = project_section>
<div class = "box box-1">
<p class = "project_name">link 1</p>
<a href="" class="project_link">
<img src="https://cdn.pixabay.com/photo/2015/05/15/14/42/monkeys-768641__340.jpg" alt="" class="project_image">
</a>
</div>
<div class = "box box-2">
<p class = "project_name">link 2</p>
<a href="" class="project_link">
<img src="https://cdn.pixabay.com/photo/2016/11/19/11/37/automobile-1838782__340.jpg" alt="" class="project_image">
</a>
</div>
<div class = "box box-3">
<p class = "project_name">link 3</p>
<a href="" class="project_link">
<img src="https://cdn.pixabay.com/photo/2019/04/03/09/24/cherry-blossom-4099835__340.jpg" alt="" class="project_image">
</a>
</div>
<div class = "box box-4">
<p class = "project_name">link 4</p>
<a href="" class="project_link">
<img src="https://cdn.pixabay.com/photo/2019/02/28/13/06/sea-4025901__340.jpg" alt="" class="project_image">
</a>
</div>
</div>
所以我所做的是我调整了你的一些 css 和 html。我注意到您重复使用了这些属性,color: white; border-color: black; border-style: solid;
因此我创建了一个.box类来重用这些属性以避免重复。
.box {
color: white;
border-color: black;
border-style: solid;
position: relative;
display: flex;
justify-content: center;
align-items: center;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
我用.project_link类添加了这个锚标记,并在其中添加了图像。并在图像上添加了一个.project_image类
<a href="" class="project_link">
<img src="yourimageurl" alt="" class="project_image">
</a>
然后设置锚和图像的样式,我添加了这些行
.project_link {
position: absolute;
top: 0;
width: 100%;
height: 100%;
/*not visible at first so that when
box was hovered it will make a popover effect*/
opacity: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease; // added a transition
}
.project_image {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
}
.project_link:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
最后制作悬停效果
.box:hover {
cursor: pointer;
background: transparent; // make the background transparent
}
.box:hover .project_link{
opacity: 1; // transition from 0 opacity to 1
}
推荐阅读
- typescript - 在 TypeScript 和 MobX 的函数中未定义在类主体中声明的变量
- javascript - 带有JS对象数组的SQL事务?
- r - 传单地图不提取反应数据
- visual-studio - 如何从面向 WSL 的 Visual Studio 2019 运行 Qt 应用程序
- css - Max Mega Menu 子菜单顶部的白色三角形
- matlab - 多个工人,每个工人都有多个核心
- html - 如何使按钮彼此靠近?
- python - 将整数格式规范“d”逐行应用于 pandas DataFrame 中的 numpy.int 列时会产生 ValueError
- asp.net-core - 无法加载文件或程序集'Microsoft.EntityFrameworkCore.SqlServer,版本 = 3.1.0.0
- machine-learning - 使用 huggingface 的 distilbert 模型生成文本