html - Html和CSS如何使具有悬停效果的图像成为超链接
问题描述
嗨,我对编程很陌生,我对 html 有基本的了解,对 CSS 有更基本的了解。我一直在尝试为我的 wordpress.com 网站制作图像,当光标悬停在上面时会变成带有文本的叠加层。我已经设法找到了一些我想要的样品,而且我已经非常接近了。我唯一不知道该怎么做就是让它成为我的图像也是一个超链接,因为它目前只有悬停效果。
这是我的 CSS 代码:
.container {
position: relative;
width: 400px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.projeto01 {
color: white;
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
这是我的html代码:
<div class="grid-portefolio">
<div class="container">
<img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" class="image" alt="Albert Lee Banks Electorate"/>
<div class="overlay">
<div class="projeto01">Albert Lee<br>Banks Electorate</div>
</div>
</div>
所以总结一下,我想知道在 CSS 或 html 中添加什么到我的代码中以使其成为图像也可以作为另一个页面的超链接。
解决方案
只需将所有内容包装在<a>
标签内,如下所示:
<div class="container">
<a href="https://example.com/"><img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" class="image" alt="Albert Lee Banks Electorate"/>
<span class="overlay">
<span class="projeto01">Albert Lee<br>Banks Electorate</span>
</span>
</a>
</div>
推荐阅读
- r - R Highcharter - 共享工具提示(和各种工具提示参数)不起作用
- json - 使用正则表达式解析 Git Json
- javascript - 寻找合适的代码架构来嵌入音频,同时防止页面更新闪烁(HTML/javascript/Ajax)
- css - 网格列表向左浮动
- c# - 通过引用传递 DataGridViewCell
- gcc - 为什么我的内联汇编代码会导致三重错误?
- r - 在 tsCV 中循环预测函数
- python - 在 Python 函数调用中创建生成器 - 为什么会这样?
- html - 如何在 html/EJS 中将图像发送到电子邮件
- android - 将我的 Unity android 升级到 64 位后,在 Google Play 上上传 apk 后仍然出现错误。不符合 64 位