Html和CSS如何使具有悬停效果的图像成为超链接

Posted 2023-03-05

【中文标题】Html和CSS如何使具有悬停效果的图像成为超链接

【英文标题】：Html and CSS how to make image with hover effect a hyperlink

【发布时间】：2021-07-19 01:58:35

【问题描述】：

嗨，我对编程很陌生，我对 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" />
  <div class="overlay">
    <div class="projeto01">Albert Lee<br>Banks Electorate</div>
  </div>
</div>

总而言之，我想知道在 CSS 或 html 中添加什么到我的代码中，以便图像也可以作为指向另一个页面的超链接。

【参考方案1】：

我认为它可以帮助你。

.page-link 
  position: relative;
  width: 400px;
  display: flex;
  overflow: hidden;


.page-link img 
  width: 100%!important;
  height: auto;
  transform: scale(1);
  transition: transform .4s ease;


.projeto01 
  color: white;
  font-size: 40px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 135, 186, .6);
  opacity: 0;
  transition: opacity .4s ease;


.page-link:hover 
  cursor: pointer;

.page-link:hover img 
  transform: scale(1.1);

.page-link:hover .projeto01 
  opacity: 1;

<div class="grid-portefolio">
  
<a class="page-link" href="https://www.example.com">
  <img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" />
  <div class="projeto01">Albert Lee<br>Banks Electorate</div>
</a>

【参考方案2】：

只需将所有内容包装在 <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" />
     <span class="overlay">
       <span class="projeto01">Albert Lee<br>Banks Electorate</span>
     </span>
  </a>
</div>

【讨论】：

感谢您的帮助！您是否也知道如何制作它，以便我可以控制图像在页面上的位置以及大小？

您希望在页面的哪个位置？什么尺寸？