How to Add Image Overlay Hover Effects with CSS3 Transitions in WordPress

Do you want to add image overlay hover effects with CSS3 transitions in WordPress? This can be great for keeping your readers engaged with your content. With this method, overlay effects are applied to an image with the help of CSS3 transitions. These effects are automatically shown when a user hovers their mouse on the image. In this article, I will show you the easiest way to add image overlay hover effects with CSS3 transitions in WordPress.

How to Add Image Overlay Hover Effects with CSS3 Transitions in WordPress

First we are going to add some custom HTML code with the image in it. You will need a custom HTML block for it. So just create a new page or edit one and add a new Custom HTML block.

Once you have the custom HTML block ready add the following piece of code in it.

<div class="container">
  <img src="https://mysite.com/wp-content/uploads/camera.png" alt="camera" class="image" style="width:100%">
  <div class="middle">
    <div class="text"><a href="https://mysite.com.com/buynow-camera">Buy Now</a></div>
  </div>
</div>

What this means is that you have a parent “container” div that contains the image and two other div blocks (one with a “Buy Now” link in it). What we will do is turn the “Buy Now” link into a button and overlay only when hovered over the image.

In order to apply these effects we will need to add some CSS to the containers as well as the image itself.

Open your theme customizer (Appearance > Customize), select Additional CSS and add the following CSS in it.

.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

This will add overlay hover effects to the image that you added in your custom HTML block.