I'm trying to add a slight grey colour to the image when you hover over it, I'm implemented a jquery slider and it pulls in the images via the code below
<li>
<img src="new_z1.jpg" alt="" width="250" height="100"> </li>
Whats the best way to add a grey hover effect to the images?
Here is the site, the carousel is at the bottom of the page with all the logo's
http://goo.gl/CoZgB
Do you want to make your images grey scale? If it's that so, just use this
Demo
Reverse way Demo
img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
If you need smoothness, just use CSS3 transitions :)
This is a demo that helped with the same thing:
http://webdesignerwall.com/tutorials/html5-grayscale-image-hover
Alternatively you can cause a different image to load when you hover. This requires much less code, but would require another image load.
Related
I am using the grayscale filter on a slider with logos in it. I'd like all of the logos to be filtered to the same shade of gray. As you can see below, depending on the color of the logo, each is getting filtered to a different shade.
Here is my CSS:
section.fullwidth .carousel-exhibitors .logo-wrapper .tint img {
position: relative; z-index: -2;
filter: gray;
-webkit-filter: grayscale(100%);
-webkit-transition: all .6s ease;
-webkit-backface-visibility: hidden;
}
Is it possible to filter them all the same shade?
I managed it (with the help of the previous post I pointed to) without SVG...
Fiddle
Code:
<img src="https://www.google.es/images/srpr/logo4w.png" class="image">
Css:
.image {
-webkit-filter: grayscale(100%) brightness(60%) contrast(10000000%);
opacity: .3;
}
Unfortunately, if you have to support IE then you are still going to get colour - it doesn't have an equivalent to contrast - I don't believe it, but I should have!
Back to my very original point - if you have to support all (lowly) browsers, create copy images in b/w and fade to gray and save the images like that in the first place.
As PaulG said, this is impossible, because all filters are relative to original colours. However, there is one moment: if your logos are transparent (which means they use transparency instead of white colour as background), you could run an SVG filter such as this:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="binarize">
<feColorMatrix in="SourceGraphic"
type="matrix"
values="0 0 0 0 .4
0 0 0 0 .4
0 0 0 0 .4
0 0 0 1 0" />
</filter>
</defs>
</svg>
This matrix dismisses RGB colours from the target pixel and uses it's opacity multiplied by 0.4 as new RGB. 40% is the shade, can be changed. Such filter can be applied via adding it to html and this css:
filter: url(#binarize);
Or you could save it to file binarize.svg and:
filter: url(binarize.svg#binarize);
However, this is mostly theoretical, not all browsers support SVN filters and surely not all logos have right transparency. Here's a fiddle for example. If you don't use Mozilla, prefixize the filter property.
you could look, as well, at those 3/4 different ways to turn black and white your logos:
filter:grayscale();
mix-blend-mode
filter:url(); + svg (here saturate type) equals in css filter: saturate(0%);
demo to play with
div {
background: #fff;/* #000 - #fff works for blend-mode to turn gray , any other color will be used blue>blue&white */
}
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: 30%;/* demo*/
}
img:first-of-type {
mix-blend-mode: luminosity;
-webkit-filter: none;
filter: none;
}
img:last-of-type {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
}
<div><img src="http://www.creads.fr/blog/wp-content/uploads/2011/05/logos.jpg" /><img src="http://www.creads.fr/blog/wp-content/uploads/2011/05/logos.jpg" /><img src="http://www.creads.fr/blog/wp-content/uploads/2011/05/logos.jpg" /></div>
I just faced this same issue and fixed it by manually setting the opacity (between 0.3 and 0.7) value for each image, ended up working out quite well.
Is it possible to place an "overlay" div on top of a picture with color and as a result, gray out the part of the picture that the overlay is covering?
I know there is the -webkit-filter property, but that seems to only gray out the entire image the property applies to.
Putting a gray div on top of the picture does not seem to work either because some of the color from the image still seems to show through!
Right now the only solution I can think of is to overlay the exact same image on top of the original image with a -webkit-filter property on it.
Thanks in advanced.
Edit:
Sorry this probably isn't very good, but hopefully should illustrate what I want:
This is the original image. Notice the color:
After having an overlay on top of the original image, the pattern still shows, but now that section is completely devoid of all the red:
There's no great solution for this with css and html. If I absolutely had to do this, I'd just bring the image into photoshop and manually add in the grayed out area. I don't think the semi-transparent div overlay is a bad option either, but you mentioned that not being what you desired.
Sometimes you have to compromise the design or do things in a way that isn't ideal (ie photoshop images). Hopefully someone can provide a better alternative, but I don't think there is one.
An overlying div coloured grey but with an opacity less than 1 should achieve the desired effect (unless I've misunderstood). See, for example, Example 3 here.
I took a stab at this. Check the fiddle:
http://jsfiddle.net/9yVuA/
Basically, if you use containing elements you can achieve an effect that fits how I see your request:
<div id="test">
<div id="overlay"></div>
<img id="image" src="http://i.stack.imgur.com/ncoqL.png">
</div>
and the css...
#test{
width:400px;
height:400px;
overflow:hidden;
position:relative;
padding:0;
margin:0;
}
#overlay{
width:400px;
height:400px;
background:url(http://i.stack.imgur.com/ncoqL.png) fixed;
position:absolute;
top:-400px;
left:0px;
z-index:100;
-webkit-transition:.2s linear;
transition:.2s linear;
-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
#test:hover #overlay{
top:-200px;
-webkit-transition:.2s linear;
transition:.2s linear;
}
You may need to add extra support for transition for cross browser support. I just put this together pretty quickly so I may have left out some things. The alignment is a little off, etc, but it proves this is possible with just css and html.
I hope the z-index property will help you.
Please check Fiddle for a simple example.
For your overlay div you have to assign
z-index:999;
This will hide the image parts. Hope this will help you.
Grayscale is working fine with all the browsers except ie10 and ie11.
I have even tried this. It worked well with images these are embedded in HTML code, but is not working as background image, declared in CSS.
I have even tried:
img.grayscale:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
svg {
background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}
This does not work either.
The CSS code that I use to grayscale the background image:
#callouts{
min-height: 219px;
margin: 33px 0px 0px 0px;
padding-left: 40px;
background: url("/static/images/images/gs-pricing-4panel.png") no-repeat;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(1);
}
I've used this tool any time I needed a gradient:
http://www.colorzilla.com/gradient-editor/
IE doesn't yet support the CSS filter property, either as built-in filter functions or as a url referencing an SVG filter. The only way to get a filter effect working is to use inline SVG for your image, and apply an SVG filter to that.
Also, IE doesn't like data:URIs expressed in plain text, they need to be either fully URL-encoded or base-64 encoded. But it wouldn't make a difference in this case.
I'm the creator of the jQuery plugin at https://github.com/karlhorky/gray. Background images are supported. Your element with the background image needs the class grayscale. Example here.
<div class="grayscale" id="callouts"></div>
OR: If you don't want to use the grayscale class name, you can manually invoke the jQuery plugin on your element with JavaScript. Example.
$('#callouts').gray();
try JS fix
It is using javascript to detect the browser and creates a canvas and then uses filter
http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/
I have filter on some images that make them gray, and only hover on them make them color:
.bxslider2 img {
display: inline;
float: left;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%);
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
.bxslider2 img:hover {
filter: none;
-webkit-filter: grayscale(0%);
-moz-filter:grayscale(0%);
}
I want to keep that code, but i have problem on ie8 - only there i see black around the images. I found solution, but this solution remove the gray filter, and i cant find way to combine it:
.bxslider2 img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}
This code remove the black around the image - and that's good, but it also remove the gray efect. How can i keep the gray filter + remove the black around the png?
I think I might have an easier solution for you. When turning off the ie8 css you added, the only images which cause problems are the ones which have space outside the round circle.
See here when I select the images that the ones with issues are larger with transparent space outside the circle than the ones without:
It looks like all the images without black borders are 76x75 pixels and the ones with the issues are 85x85 pixels. If you crop these down to size so that these is not extra transparent space on the outside does the problem go away?
To answer "How can i keep the gray filter + remove the black around the png?"
First
You need to realize that all the filters that are desired to be applied must be made in a single filter call. So something like what follows (but note that...
progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
...is the IE5.5+ equivalent to IE4 filter: gray;, see here):
.bxslider2 img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)
progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}
This is because the second call to filter for the gradient will override the first call of filter: gray in your code by normal css cascade rules.
Second
The gradient is a special type of filter, a procedural surface, which does not always play nicely with other "static filters", so there is not a guarantee that grouping the two together as above will actually resolve the problem (if not, there probably is no resolving it). As you may gather by my note here, I have not tested whether this will fix your problem, but the root of your issue is my "first" point above. Whether IE8 will play nice with its own filters to fix your issue is really a "different" issue than keeping two filters on one element.
I'm fairly new to HTML and CSS and for my website, I was attempting to make something of this sort. http://www.gontroller.com/
Needless to say, It's not turning out so well... Here's what I have so far: http://www.cityworksmc.com/possibleindex.html
If someone could lead me in the right direct, I would be very grateful. I've also tried some other codes that I found around the internet, and needless to say, they didn't work so well.
Here is one of them.
img.books {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
img.books:hover {
filter: none;
-webkit-filter: grayscale(0%);
I also looked at some of their source code, and it was a little above my head, haha.
Thank you in advance.
They are using a CSS sprite image for each links background and then moving the background position on hover.
Here is a link to the image http://www.gontroller.com/img/gforums.png
Then the css is like this
#forums a {
background: url(http://www.gontroller.com/img/gforums.png) no-repeat;
background-position:center top;
height:239px;
width:222px;
}
then on hover they are moving the background position
#forums a:hover {
background-position: center bottom;
}
Here's a good article on CSS sprites by Chris Coyier http://css-tricks.com/css-sprites/