Webmastersite.net

Search    Register    Log In   

Details

Overlaying Text on Images
By
Feb 04, 2016 at 10:37 AM (Edited Feb 04, 2016 at 10:39 AM)

Sometimes, especially in WSN Gallery, you may want to overlay text on top of an image. Today while working on a custom theme I applied this simple CSS to overlay the image titles over the top of the image thumbnails (in category and search results) and the tool links over the bottom of the thumbnails:

.gallerylink .linkbitinfo .linktitle, .gallerylink .linktools { text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF; }
.gallerylink .linkbitinfo { position: relative; top: 25px; }
.gallerylink .linktools { position: relative; top: -45px; }

The text-shadow line puts a white outline around the dark text so that it'll be readable on any color of image. The other lines move the title down and the tools up, respectively, using relative positioning CSS.





Views 365 views. Averaging 0 views per day.
Similar Listings
Custom Pin Images, Reviews & Bootstrap 4

Sorry, you don't have permission to post. Log in, or register if you haven't yet.

Please login or register.