Changing imgs by “a:hover”. Help!

[brunotatsumi]

I’m making a new website for a fashion photographer and I’m having some issues with programming the CSS.

You can inspect at
http://www.rtakeshi.com

I think the UX is not so good right now, because you don’t feel like you have to click on the photos to see more.
The black and white photo is the cover of each editorial. I tried to change the UX, by putting the original color photo while you “a:hover”. Just to make the user realize that he must click on it to see more.

I made some divs on each photo, and put the “color_photo” on the “background: url()” at the CSS. While you “a:hover”, the img was always changing on the back, not on the front.
How can I fix this?

[NghiQuach]

[W3 schools](http://www.w3schools.com/css/css_image_transparency.asp “image opacity”)

I think this will help you.

[CrocoDillon]

They are not that bad :P

You can use both black and white, and color images as a background right?

a > img {
url(b&w);
}

a:hover > img {
url(color);
}

alternatively, you can just use a color image and use css filters to make it black&white. I’ve seen a cross browser solution not too long ago but didn’t bookmark it. Maybe someone else (or Google) can fill me in :)

[CrocoDillon]

http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html (not the one I was talking about but Google filled me in)

[CrocoDillon]

Yeah you’re right about w3schools.

That solution you linked to isn’t Hugo’s own solution, it’s actually from the same link I gave :)

[brunotatsumi]

@NghiQuach @CrocoDillon @ChrisP
Thanks everyone!

[Kitty Giraudel]

Depending on the size of your image, you might want to use a little pseudo-element hack in order to avoid an awkward loadtime when hovering.

.my-element:after {
content: ”;
background: url(my-hover-image);
clip: rect(0 0 0 0);
opacity: 0;
position: absolute;
}

[brunotatsumi]

@HugoGiraudel That’s great, man! Thank you so much!

[Author]

Posts