Give help. Get 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

    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]( “image opacity”)

    I think this will help you.

    # 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 {

    a:hover > img {

    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 (not the one I was talking about but Google filled me in)

    # 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 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 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.