Add a hover overlay above entire block (not working)

How To
1

Hi,

I’m working on a query loop and I want each block to have a hover effect (thinking of a semi-transparent white overlay; went with black for testing).

I tried setting up the overlay like this:

Screenshot 2025-04-04 at 10.45.53 AM
Screenshot 2025-04-04 at 10.45.53 AM1920×849 102 KB

However as you can see it’s not working. It looks more like it updates the background color of the Block, rather than put an overaly on top of it.

This is not intuitive… At face value it seems I did the right thing(?). I don’t think there is any custom code getting in the way (just added this).

Thanks!

2

Ended up doing some fancy stuff:

.block-hover-effect {
  position: relative;
  overflow: hidden;
}

.block-hover-effect::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0); /* start transparent */
  transition: background 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

.block-hover-effect:hover::after {
  background: rgba(0, 0, 0, 0.1); /* adjust for desired darkness */
}

Also there is this thread: How to activating all hover effect in one block when mouse arrow hover one the block area?

This would be a nice addition for Bricks to add, however, as its a common need!