Hi, that’s a good question. I’ve tested some CSS that created a magnifying glass icon above fancybox images before but I can’t seem to be able to find it right now… I’ll search some more or try to reproduce it for you and respond here later 🙂
OK found it. This block of CSS in your theme customizer (Additional CSS) might do the trick:
/* PURE CSS MAGNIFYING GLASS OVER FANCYBOX IMAGE LINKS */
.fancybox.image {
position: relative;
display: inline-block;
}
/* :: the glass */
.fancybox.image::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
border-radius: 30px;
height: 42px;
width: 42px;
margin: -25px 0 0 -30px;
border: 4px solid #fff;
}
/* :: the handle */
.fancybox.image::after {
content: "";
height: 8px;
width: 18px;
border-radius: 0 5px 5px 0;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
margin: 20px 0 0 10px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
/* :: :: an extra plus sign on hover */
.fancybox.image:hover::before {
content: "+";
color: #fff;
line-height: 42px;
font-size: 42px;
text-align: center;
}
But depending on your theme you’d need to modify it as the icon might not show correctly. Like the magnifying glass handle not in the right spot, or the plus sign on hover not in the center. It all depends…
Just need to fix some issues due to my “Root” wp theme and I think all will be fine. Magnifying Glass and “+” sign are appeared.
The “transform: rotate(45deg)” function doesn’t worked yet , because of my wordpress theme possibly.
May be you will implement this new functions in your next updates of plugin 😉
thank’s for the support.
May be you will implement this new functions in your next updates of plugin
I have considered that but as you noticed, it is too fragile and depends on each theme or other plugin css breaking it :/
