Zoom-in rounded area with plus sign

Is there a way to change to default zoom-in rounded area with the plus sign for viewing pictures in zoom mode? I don’t find this very aesthetic and sometimes the ratio of the area and the sign gets messed up, too.
A configurable roll-over effect would be much better. Maybe I’m missing something.

Seems to be: a[data-lightbox]:hover::before declaration (style.css)

zoom-in-button-for-pictures

1 Like

I have the same problem!!

Try to change the style.css or add a line of code in the head.

I’ve tried this:

a[data-lightbox]:hover::before{
content:"\f06e";
font-family: FontAwesome;
    padding-top: 2px;}

So you have an “eye” instead of the plus. The “padding-top” helps to center the eye :wink:

eye

you can also take other icons from FontAwesome … look here http://astronautweb.co/snippet/font-awesome/

Hope this helps :slight_smile:

Thanks for sharing!
I was looking for this the other day!

Why is the cross not in the middle?

I guess this is related to the alignment settings of the image.

Thank you very much for the hint. In ‘style.css’ I’ve chosen:

a[data-lightbox]:hover::before{
content:"\f055"; /* was "+" Plus sign */
font-family: FontAwesome;
padding-top: 4px;
font-size:30px;
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%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);}

blocs-lightbox-zoom-icon

1 Like