One image overlay to have multiple colours depending on the categories of post in wordpress

1 Views

I am using wordpress to build a portfolio website. I am currently showing the featured image of my post on the main blog and have a coloured overlay when rolling over/hovering the image, that changes according to the category the post is in. Currently I am doing that by using a transparent 1x1px image as background url() in my CSS resizing it to the size of the image.

What I would like to do is for the colour rollover to show all different category colours in stripes if a post is in multiple categories. For example if my categories and colours are the following…

Read More

Print Work – Green

Web – Red

Moving Image – Purple

…and I have a post that goes into ‘Print work’ and ‘Web’ the hover state should be half green and half red over the image. If a post is in all three categories the hover state should be in 3 colours (3 stripes – 1 green,1 red and 1 purple next to each other).

I haven’t found any clue on whether that’s possible in my searches and don’t quite know where to start. Is this achievable at all and if so with using CSS only or Jquery?

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You could do this by setting a container div overlay, lets call it .hover_div. This div will hold any / all of the color divs for the categories – let’s call these .color_div. Make the categories for each post create another .color_div inside the .hover_div using a foreach loop.

    Using Jquery, set the width for these divs witha percentage:

    var colors = $(".color_div").length;
var color_width = 100/colors;
$(".color_div").width(color_width + "%");

    This will make equal size color divs in the containser .hover_div. Give each of the color_divs another class name to target each and set a color.

    You should be all set.