I added these icons http://grab.by/9HYW to my site and wanted to change the color on hover...what is the best solution?
The icons are in png format and would like to change on hover to their blue colors...thanks in advance.
You should generate new blue images with your editor (the one that you've created the first icons), then you use css hover.
You can use a css sprite (arguably the cleanest and most cross-browser comparable way) in which you basically have both the regular and hover state in one image and change the background-position of the div on hover. (xpixelz links should help you.)
If the images are actually printed on the page, you can use javascript to swipe the image with the hover state on hover.
I'm not sure how they are displayed on the page, but if they are on a solid colored background, you could make a png of the negative space and place it inside a div of the exact width and height of the image then just change the background color of the div on hover, since the actual logo is transparent you would see the background color of the parent div.
as you may opt for CSS sprites
http://css-tricks.com/css-sprites/
google for "css sprites generator" if you need a quick way ;)
If you are using flat png icons then you can use jFlat jquery plugin. Remember it only supports for HTML5 supported browsers
source : http://flaticon.sodhanalibrary.com/jFlat.html
Related
is there a way to crop a background sprite?
We have our background image to the CSS body class. Now, if there is not an element with a white background overlaying the rest of the sprite, we have this mess of all the other images there.
I tried background-size, but that doesn't do it. So is there a CSS value that I'm missing that defines not just the background position, but also the actual area the image that should be used?
Thanks!
https://www.w3schools.com/css/css_image_sprites.asp - This article covers the use case senario and correct execution of how to use image sprites.
Okay, so the only way I could work out for this is to put the main body page background at the bottom of the sprite. Assign the correct background-position values and add a background-color: #fff, so the rest of the page becomes readable text.
Thanks for your input!
Is it possible to fade the bottom of a background image to transparent? Would I specify background-image and linear-gradient to achieve this?
Thanks!
Not exactly in the way you describe, but you can consider some possibilities to reach the same effect:
Edit the image so that the transparency gradient is part of the image. If the gradient will always be the same and we are talking about a single image, you should do this
Instead of fading the image over the background, put the 'background' color over the image and set a linear gradient on that (in another div or 2nd background in the same container)
You can check out fading css clipping masks, see the Harry Potter example at https://css-tricks.com/clipping-masking-css/ but I am not sure about browser support.
It is also possible to create the fading clipping mask inside an SVG (so the SVG contains a link to the image file and has a clipping mask) I would guess this is more widely supported than the above option
For clarification: I'm not asking how to darken an image when you hover over it. I'm wondering how to make other images surrounding the image your cursor is over darken.
Here is an example: http://www.b-reel.com/
When you hover over the big category images, the surrounding images darken, but the hovered image remains the same.
Any input would be appreciated. Thank you!
You don't make surrounding images darker. Instead, what you do is you put a div around all images, and when the cursor is over this div, all images are darker. But you also add div elements around each image, and you make an image less dark when the cursor is over it. The combination of both is what gives you the desired effect.
In the example you posted they are using JavaScript to apply a .fadeOut class on the other divs. That .fadeOut class sets the opactiy of the other divs to 50%.
I was wondering if this is possible in pure CSS. Suppose you have an image with white background. Is there a CSS property that removes the specified color from an image and make it transparent?
No Alireza, that's not possible with css I'm afraid.
I want to make a menu with semi-transparent blurred background.
At the moment, I've only found a solution for IE: filter: blur(strength=50);.
How can I do this cross-browser, without using images?
There is no blur property in CSS, and filters are an IE-only feature. You'll have to use images.
The only way around this is to use a second, blurred version of the image and apply that as the background. You'll need to set up a common background position to line them up, e.g. using position: fixed or calculating the offset position from the top left corner of your menu.