Image Gallery Block overlay fade on hover

The W3Schools example is a valid way to add a hover effect. The trouble is the gallery block’s HTML structure does not match the example, so adapting the example code to work with a gallery element is not all that simple.

You could probably use figcaption for .overlay, except it doesn’t cover the entire image, so you’d need to alter it’s default CSS so it fully covers the image.

You can probably use figure for .container.

There’s a solution in there somehow, but it’s not straight forward. Perhaps the best suggestion is to learn to use your browser’s element inspector tool to good effect. You can fiddle with different CSS rules until you get the effect you’re after. Copy any changes you want to make permanent to the Additional CSS section of the customizer or style book.

Hi, @bcworkz. Thank you for reply!
Following your advice, I experimented with different CSS rules and I’m getting closer to the expected result.
Although I wasn’t able to achieve the effect for the Image Blocks inside the Image Gallery Block, but working around it, I created a grid of Column Blocks and embedded Image Blocks (with Additional CSS class) in each column. It seems to work correctly, but I would like to ask whether this solution carries any risk of potential errors?

The code I used:

.hover-img {
  display: inline-block;
  max-width: 100%;
  min-width: auto;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.hover-img::before,
.hover-img::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.4);
  content: '';
  transition: 0.4s ease;
  opacity: 0;
  z-index: 1;
}

.hover-img figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  display: flex;
  justify-content: center;
  opacity: 0;
  z-index: 2;
  line-height: 1.5rem;
  font-size: 1rem;
  font-family: sans-serif;
}

.hover-img:hover::before,
.hover-img:hover::after {
  opacity: 1;
}

.hover-img:hover figcaption {
  opacity: 1;
}

This solution leaves me with one problem that I cannot overcome.
Before any change, each Image Block is linked to a subpage.
These links stop working after adding an Additional CSS Class to Images and pasting the above code in Additional CSS. I still can add links to Image figcaptions, but they are limited by the area of the text box.

Illustrating the case:

As you can see I aim to make the link available when you hover the mouse over the image, without having to point at the figcaption.

Can I add a link to an image in the hover status with Additional CSS?
Or, can I somehow increase the box around the text that would still act as a link?

All the best, Kacper

whether this solution carries any risk of potential errors?

Anything involving code carries a risk of potential errors ??

If at all possible, try to come up with CSS that does not require additional class attributes. The biggest risk is neglecting to add the necessary classes when creating a new gallery. If you need to distinguish normal galleries from hover effect galleries, it’d be best to add a custom class only to the overall container, not the individual images.

I get that it’s easier to adapt the W3 schools example to your site with custom classes. This is useful for getting everything working as you like, but once that is accomplished I recommend attempting to modify the CSS selectors so custom classes are not needed.

The reason the links fail when hovering is the overlay in default block HTML is not linked, only the image itself is linked, not the overlay. You’d need to add another link anchor to the overlay, or link the entire container instead of just the image. Unfortunately doing so is not possible with CSS. To modify block HTML, you’d need to modify the block’s source code. Either via React filters or by creating a custom block based on the default.

Unless you’re keen to make this into a significant learning project, you may be better off finding a gallery plugin that already does this out of the box. I’m assuming you’re not already a skilled React developer where a custom gallery block would be a piece of cake ??

Sadly, I don’t know of any particular plugin that does this. I’d expect them to exist, I’m just unaware of which ones they would be.

My experience with plugins is that they rarely deliver exactly what is needed, and when they do, it comes with a lot of unnecessary extras. That is a bit of a problem for a purist like me. ??
Anyway, I found a plugin that should be useful for now, but at the same time I will start learning how to create my own custom block.

Thank you for all your tips.

I definitely can relate to your reluctance to use 3rd party plugins, it’s one of the reasons I learned to code for myself. Even if you don’t use the plugin as intended, you can either modify it to suit your need or use it as guidance on how to accomplish something through your own coding efforts.