Hi there,
I have 2 issues with the lightbox which i cannot solve.
I would like to be able to control the size of the shadow around image and the caption/title text under the image
Please see screenshot
This is the Custom Css I added so far. Playing with fontsizes in there didn’t help.
a.x-img-link:before {
content: none
display: block;
position: absolute;
margin: -36px 0 0 -35px;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
font-size: 62px;
font-size: 6.2rem;
line-height: 72px;
text-align: center;
text-shadow: 0 0.035em 0 rgba(0,0,0,0.35);
vertical-align: middle;
color: #fff;
border-radius: 100em;
opacity: 0;
-webkit-transition: opacity 0.75s ease;
transition: opacity 0.75s ease;
font-family: “fontawesome” !important;
font-style: normal !important;
font-weight: normal !important;
speak: none;
-webkit-font-smoothing: antialiased;
}
a.x-img-link:hover,
a.x-img:not(.x-img-thumbnail):hover {
opacity: 1;
}
a.x-img-link img {
-webkit-transition: opacity 0.75s ease;
transition: opacity 0.75s ease;
}
a.x-img-link:hover img {
opacity: 0.8;
}
a.x-img-link:hover:before {
opacity: 1;
}
.x-masthead a.my-logo:hover {
color:transparent;
}
.x-masthead .logo {
background:#fff;
}
.ilightbox-toolbar.light {
left: 50%;
}
/* Remove White Border around Lightbox */
.ilightbox-holder {
border: none !important;
background: transparent !important;
padding: 0 !important;
}
Thank you very much!