one image overlay to have multiple colours depending on the categories of post

  • I am currently showing the featured image of my post on the main blog. I 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 image as background url() in my CSS.

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

    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 (like 3 stripes of green, red and 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?

    A starting point or some help would be great.

    Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)

  • I would put one div with the stripes on top of another div with the image. Something like:

    <div class="thumb-under">
	<a href="<?php echo get_permalink(); ?>">
	<?php
	if ( has_post_thumbnail() ) {
	  the_post_thumbnail('thumbnail');
	}
	else {
		echo '<img src="';
		echo get_bloginfo('template_url');
		echo '/images/thumb.jpg">' ;
	}
	?>
	</a>

<div class="thumb-over">
			<div class="<?php foreach((get_the_category()) as $cat) { echo $cat->cat_name . ' '; } ?>">
				&nbsp;
			</div>
</div>

</div>

    With a css class with the same name as the post category.

    Makes any sense?

    Thread Starter elbe

    (@elbe)

    Thanks for this.

    Not quite sure I am getting it.

    What does this line exactly do?

    <div class=”<?php foreach((get_the_category()) as $cat) { echo $cat->cat_name . ‘ ‘; } ?>”>

    And how do I set up the CSS? How will it recognise that its 1, 2 or 3 categories and change the width of the overlay?

    Thanks.

    a simple <div class=”<?php the_category() ; ?>”> could replace it. It puts the category name as a class.

    CSS:

    .thumb-under {
	float: left;
	display: inline;
	z-index: 10;
}

.thumb-over {
	top: 0px;
	left: 0px;
	display: inline;
	z-index: 20;
	float: left;
	position: absolute;
}

.CategoryName {
	width: 100px;
        height: 100px;
        background: blue;
}

    For each category (use the slug name) you make another class with the desired color.

    Its a start and will work with single categories.

    //*

    Thread Starter elbe

    (@elbe)

    ah ok, I had this working for a single category already. But my problem really is, how to show, that a post is in 2 or 3 categories. And how to have 2 or 3 colours appearing on image rollover depending on the categories of the post. Is that possible and if so how?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘one image overlay to have multiple colours depending on the categories of post’ is closed to new replies.