Styling/removing the big plus on images when lightbox interaction is active


#1

Hello fellow bloccers,

I have been breaking my head over this one. I would like to remove the big plus that appears when hovering over an image that has the lightbox interaction selected. I can see it is being inserted via the ::before tag but I have no clue where it comes from and how to remove this. I have this button I’ve created as a .svg so I can put the lightbox interaction on it but now the big plus appears when hovering my homemade button.

Any other suggestions to achieve this maybe. In some other project I was actually looking to style the plus to my likings but I do not understand where it is coming from and thus where to style it.

hope anyone could shed some light on this one.
Stort Tack!

Jasper


#2

Hi @Jasper

Below is the styling for the overlay on hover from the Blocs Square Gallery.

a[data-lightbox]:hover::before{ content:"-"; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial; font-size:32px; line-height: 42px; width:50px; height:50px; margin-left:-25px; border-radius: 50%; background:rgba(0,0,0,.6); color:#FFF; font-weight:100; z-index: 1; position: absolute; top: 50%; left: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }

You can style as you wish and place your code in the page header.

For example, I replaced the plus sign by a minus sign. As you can see the plus is not an image and it has a round border, etc…

MDS


#3

Thank you for the code. Thanks to you I was finally able to locate it in the style.css file. Somehow I couldn’t find it before. Now the fun starts!

Stort tack!


#4

Hi @Jasper

You’re welcome.

MDS