Grow your CSS skills. Land your dream job.

Changing imgs by “a:hover”. Help!

  • # March 28, 2013 at 1:12 pm

    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?

    # March 28, 2013 at 6:50 pm

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

    I think this will help you.

    # March 28, 2013 at 6:52 pm

    http://w3fools.com

    # March 28, 2013 at 7:24 pm

    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 :)

    # March 28, 2013 at 7:27 pm

    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)

    # March 28, 2013 at 7:33 pm

    @CrocoDillon, you’re right..they aren’t that bad at some things, but I’d hate to see someone learning use it as their go-to resource for _everything_ and then get misinformed from one of their _several_ inaccuracies..

    Here’s @HugoGiraudel‘s solution for the black and white on hover:

    http://css-tricks.com/forums/discussion/comment/90456/#Comment_90456

    # March 28, 2013 at 7:41 pm

    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 :)

    # March 28, 2013 at 8:02 pm

    Ahh, I see..I just remembered seeing it in the forums

    # March 28, 2013 at 9:44 pm

    @NghiQuach @CrocoDillon @ChrisP
    Thanks everyone!

    # March 29, 2013 at 4:10 am

    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;
    }

    # March 29, 2013 at 11:55 am

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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".