So i added ALT tags to all of the images on my site from SEO reasons. but adding those ALT tags made them appear visually on each photo inside the lightbox.
how can i hide them? i don’t like them to be visual at all.
@Aviry
Add this to the header tags:
.w-lightbox-caption {
visibility: hidden;
}
should make them globally disappear.
Tip: When viewing your published site in Chrome, you can right-click on any page element and see what CSS classes effect that element. You can modify or add any property (temporarily for that session) in the web inspector to experiment and see how it affects the item live in the browser. Once you have the behavior you want, simply copy and paste that snippet of code to override the base classes and paste it in Webflow. Chrome has code hinting built in so playing with it is really easy and totally forgiving because it is only temporary. If something goes wrong, refresh the page and try again.
thanks for the tip, i had a chance to play with the chrome inspector but i’m kinda new to CSS and HTML.
When you say add this to the header tags, you mean from the “head” custom code under the settings? isn’t that part of the HTML not the CSS?
Yes, add to Custom Code section of the site settings where it says:
Head Code
Add code at the end of the tag:
I am new to this as well and hacking my way through, so anyone is welcome to please correct me if I am off base 
If you look at a published HTML page, the code referenced CSS stylesheets are being loaded into the head. CSS style atributes can be written here as well, without being imported from an external stylesheet. The code inserted into the custom code > head code is just being appended to this section and appears after any imported stylesheets. With CSS, the last declaration applied to a property wins (unless a property has been tagged !important; by one of the previous classes). So the code you are inserting is just overwriting any previous property declared in the base webflow classes and the site classes created by the webflow designer.
In the custom code section, use the first field “Add code at the end of the <head> tag:”
Make sure to put it between <style> tags like this:
<style>
.w-lightbox-caption {
visibility: hidden;
}
</style>
1 Like