PNG Overlay an tag

[djhayman]

Hello,

I wish to overlay an icon in the bottom right corner of an image.

I’ve been trying to research online but can’t quite find anything that fits my exact scenario. I am using a wordpress blog and wish to add the overlay dependent on the tags used in a blog post (my theme already inserts the tags as CSS classes of the div containing each blog post). I hope to be able to have an icon on the blog entry without the need for creating a new blog post format. For example: a video game controller for a blog about games, a book for a big about books.

My issue has been finding some CSS which inserts the icon without declaring the overlaying image in the HTML as this controlled by my wordpress theme and I’d rather keep everything custom in my additional CSS area so I can upgrade my theme in the future.

Ideally my ultimate goal is to achieve some code which slightly shrinks the main image so the icon can also be placed over the corner to make it pop-out a little more. Hopefully the below images have make my idea a little more clear( don’t worry about the extra drop shadows on the icon, I’ve done those in Photoshop).

Any help would be appreciated, please let me know if I need to provide any more info.

Cheers
Dan

https://danhayman.co.uk/wp-content/uploads/2018/04/MainMenuIcon-1.png

https://imgur.com/KaNIBLu

https://imgur.com/bvjLKam

[Beverleyh]

We can’t really comment on images without seeing your code; if you provide a reduced sample of HTML and CSS to show us what you’re working with, and what you’ve tried, that will makes things easier to make suggestions.

Off the top of my head, have a look in to “pseudo elements”. You won’t be able to use one directly on an image (they’re not supported on img elements) but you can put one on a wrapper element (e.g. a span or div). You should be able to position it over the main image and insert the icon using the background-image property.

[Author]

Posts