Question 166299 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can I make an image with a hover effect a hyperlink in WordPress using HTML & CSS?

Hi so I’m quite new to programming and I have a basic knowledge in html and an even more basic knowledge of CSS. I’ve been trying to make images for my wordpress.com website that when hovered over by the cursor change to an overlay with text. I’ve managed to find some samples for what I want and I’ve gotten pretty close. The only thing I don’t know how to do is make it so my image is also a hyperlink because currently all it has is the hover effect.

Here is my CSS code:

.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;
}

Here is my html code:

<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>

So to summarize I want to know what to add to my code in either CSS or html to make it so the image also acts as a hyperlink to another page.

Tags:

2

Answers


  1. 0

    Just wrap everything inside an <a> tag, like this:

    <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>
    Login or Signup to reply.
  2. 0

    I think it can help you.

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search