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...
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?
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.
Related
I'm trying to get the background color which is linear gradient from this template but it appear as background image , any help please?
In Figma, images are actually a type of shape fill. Like colors or gradients.
In the template you linked, you can replace the gradient background with a different one, like a photo background.
This technique won't create a separate layer for the image. Instead, it's a fill for the parent frame.
Steps:
On that file, go a blank area and then insert the photo/picture that you actually want as the new background image for the webpage design.
Select the photo/picture.
On the fill panel, click leftmost part of the Image fill to select it. Then press CTRL+C to copy it.
Select the background frame that has the gradient.
On the Fill Panel, delete the Image. Because the gradient design is actually a pasted image.
With the background frame still selected, press CTRL+V.
i'm looking for a plugin that does the following:
I want that each featured image of each post has a semi transparent overlay over the image by default (not on hovering).
(nothing complex up to now, but here is the challenge)
However, I want that transparent overlay to have a specific color depending on the post category.
And so, I could set a color overlay for each category.
I am currently building a fluid layout website, so that when the screen resolution changes, the site changes with it, no need for individual resolution css etc.
But the problem i am having is with the navigation bar, i want to have one image with the labels (Portfolio, Blog and About), when the mouse moves over each of those labels the whole nav bar changes to another navbar image, one with different coloration to indicate the mouse is on a specific label, each label needs to be a link too (obviously).
To try to clarify, i essentially need a div mouseover event on a specific location on an image, but as mouseover events don´t exist i would have to use :hover in css, but how do i get the image to change in css? Perhaps setting the original navigation bar image as the background image, but how do i overlay the next image and get it to activate on a specific hover location? image mapping?
regards,
Jimy
I'm trying to create a thumbnail navigation for a slideshow. Below the main images will be a line of what appears to be dots, when you hover over them a preview appears.
I got this from a tutorial that was originally designed to be a next and prev navigation, but I am trying to convert it.
http://codepen.io/smalltrades/pen/sjrqm
I would like the dots to be spaced evenly across the bottom of the window, but as I am not completely fluent in css I haven't been able to find the right combination of settings. Currently all the dots are stacked on top of eachother.
Any thoughts?
How do i show a country map and make cities separate by changing color of mouseover
I need an Idea how to do it like www.mudah.my site.
Basically how they (http://www.mudah.my/) do is by having 1 normal map image with no country highlighted (actually it looks like they use a couple images but make it like 1 image by placing a transparent div over the top of them).
They have a standard image map applied to this '1' image to define the separate areas and when the user mouses over a relevant part of the map they display a specify section of the highlight image (http://www.mudah.my/img/map_highlight.png) in a specific place on top the the existing image, but behind the 1 main transparent div. Presumably so the links associated with the image map) continues to work.
Hope this helps.