将链接添加到顶部有动画背景的HTML图像
将链接添加到顶部有动画背景的HTML图像
提问于 2022-07-23 16:35:30
我有这个html来创建一个图像，当它悬停在内容/标签线div中显示文本时：
<div class="img-wrapper">
<a href="albums/Armed Forces Day 2022.html" class="link-tag" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;"></a>
<img src="src/img/albums/Armed Forces Day 2022/RAF Falcons underneath parachute canopy.JPG"></img>
<div class="content fade">Armed Forces Day Scarborough 2022</div>
<div class="tagline fade">2022</div>
</div>我有这个CSS，以动画的叠加在图像上：
margin-top: 25px;
margin-bottom: 25px;
margin-left: 7px;
margin-bottom: 7px;
position: relative;
overflow: hidden;
}
.img-wrapper > img {
display: block;
width: 100%;
object-fit: cover;
object-position: center;
}
.img-wrapper > .content {
position: absolute;
inset: 0;
font-size: 36px;
font-family:'Bebas Kai', Arial, Helvetica, sans-serif;
color: #FFFFFF;
background: rgba(41, 41, 41, .8);
display: flex;
justify-content: center;
align-items: center;
}
.img-wrapper > .tagline {
position: absolute;
inset: 0;
margin-top: 100px;
font-size: 28px;
font-family:'Bebas Kai', Arial, Helvetica, sans-serif;
color: #999999;
display: flex;
justify-content: center;
align-items: center;
}
.img-wrapper > img,
.img-wrapper > .content,
.img-wrapper > .tagline {
transition: 200ms ease-in-out;
}
.img-wrapper > .content.fade,
.img-wrapper > .tagline.fade {
opacity: 0;
}
.img-wrapper:hover > .content.fade,
.img-wrapper:hover > .tagline.fade {
opacity: 1;
}目标是当图像被点击时，它链接到我的投资组合中的另一个html页面。我尝试将链接放在div中、图像上，以及包含内容和标签行的单独div中，但是它在网页上不起作用。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-07-23 16:59:46
如果我正确地理解了您，您希望图像位于链接内(在<a>元素中)
我认为您应该使用更像这样的标记：
<a href="albums/Armed Forces Day 2022.html" class="link">
<img src="src/img/albums/Armed Forces Day 2022/RAF Falcons underneath parachute canopy.JPG"" class="link__image" />
<div class="content fade">Armed Forces Day Scarborough 2022</div>
<div class="tagline fade">2022</div>
</a>我在这里给你举了一个例子，我的意思是：https://jsfiddle.net/bvjows06/
这将允许您单击<a>中的任何元素。当您在.image-link上悬停时，您需要更改css以更改内容和标语，但我认为这是您自己可以做的事情！
顺便提一句:也许你应该重新考虑你的文件名(和链接)，这样你的单词之间就没有空格了，这可能会给你带来一些问题(例如：armedForcesDay2022.html而不是Armed Forces Day 2022.html)
Stack Overflow用户
发布于 2022-07-23 16:50:53
我想这就是你需要的。您只需用锚标记包装整个。
.img-wrapper {
margin-top: 25px;
margin-bottom: 25px;
margin-left: 7px;
margin-bottom: 7px;
position: relative;
overflow: hidden;
}
.img-wrapper>img {
display: block;
width: 100%;
object-fit: cover;
object-position: center;
}
.img-wrapper>.content {
position: absolute;
inset: 0;
font-size: 36px;
font-family: 'Bebas Kai', Arial, Helvetica, sans-serif;
color: #FFFFFF;
background: rgba(41, 41, 41, .8);
display: flex;
justify-content: center;
align-items: center;
}
.img-wrapper>.tagline {
position: absolute;
inset: 0;
margin-top: 100px;
font-size: 28px;
font-family: 'Bebas Kai', Arial, Helvetica, sans-serif;
color: #999999;
display: flex;
justify-content: center;
align-items: center;
}
.img-wrapper>img,
.img-wrapper>.content,
.img-wrapper>.tagline {
transition: 200ms ease-in-out;
}
.img-wrapper>.content.fade,
.img-wrapper>.tagline.fade {
opacity: 0;
}
.img-wrapper:hover>.content.fade,
.img-wrapper:hover>.tagline.fade {
opacity: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css" />
<title>Document</title>
</head>
<body>
<a href="albums/Armed Forces Day 2022.html" class="link-tag"
style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;">
<div class="img-wrapper">
<img
src="https://images.unsplash.com/photo-1658495679082-a88dc0818e4a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"></img>
<div class="content fade">Armed Forces Day Scarborough 2022</div>
<div class="tagline fade">2022</div>
</div>
</section>
</a>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73092458
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号