Adding a white frame? Reducing image transition time?

Hey Mat,

You should be able to add a border by adding the following css to your theme or WordPress’ custom CSS module in the customizer:

.featherlight .featherlight-content {
	border: 10px solid #fff !important;
}

The animation is also handled with CSS, so you should be able to increase the animation time with this CSS:

.featherlight .featherlight-content {
	-webkit-animation-duration: 2s !important;
	animation-duration: 2s !important;
}

In that code, 2s stands for 2 seconds, so you should be able to adjust that to whatever value you like such as 1.5s or 3s etc.

Hope that helps!

Hi! Thanks so much for helping out! The code works perfectly!

The only issue I still get now is that strange bleed at the bottom (I’m not sure that’s the proper term) when images fail to resize properly. I’ve made a quick screenshot to showcase the issue:

View post on imgur.com

Or you can see it at mathiasgabriel.com with all images that are longer in height than width. Hopefully this is something that can be fixed easily? Again, thanks a ton!

Ah, I see what you mean.

It looks like if you move the border to the .featherlight .featherlight-inner selector, the problem is resolved.

.featherlight .featherlight-inner {
	border: 10px solid #fff !important;
}

Rather than the snippet I pasted above seems to do the trick.

Let me know if you run into any additional problems and I’ll do my best to help you sort them out. ??

Oooooh that’s perfect! Thank you so much ??