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

如何解决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 以使其图像也可以作为到另一个页面的超链接。

解决方法

只需将所有内容都包裹在 import smtplib from email.mime.multipart import MIMEMultipart from email.mime.text import MIMEText smtpserver = smtplib.SMTP("smtp.gmail.com",587,source_address=("2a00:b700:5::1:1fe",0)) smtpserver.ehlo() smtpserver.starttls() smtpserver.login('mygmail@gmail.com','mypwd') msg = MIMEMultipart('alternative') msg['Subject'] = "Good Morning" msg['From'] = 'TheNameIwantToAppearOnTheEmailSent ex: Juan Frederico' msg['To'] = "receipient@gmail.com" MIMEText("Hello",'html') msg.attach(part2) smtpserver.sendmail(msg['From'],"receipient@gmail.com",msg.as_string()) 标签中，如下所示：

<a>

我认为它可以帮助您。

.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" alt="Albert Lee Banks Electorate"/>
  <div class="projeto01">Albert Lee<br>Banks Electorate</div>
</a>