Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #593457

    Hello
    My client wants to do something just like this –
    example of using 2 images for a portfolio grid

    Obviously the first image is the featured image but could you please tell me how to have each rollover be unique for each entry.

    This is the current working page –

    current portfolio grid

    So they want to start with a logo and have something like what is there now to appear on hover. Thanks! :)

    #594056

    Hi webWahine,

    Maybe this thread could help help you out? http://stackoverflow.com/questions/4717117/css-image-link-change-on-hover

    Regards,
    Rikard

    #594527

    That makes sense but how would I implement that into portfolio items, please?

    #597196

    Hi!

    You can try something like this:

    .grid-sort-container .grid-entry:hover img {
        visibility: hidden;
    }
    
    .grid-sort-container .grid-entry:hover article:before {
        content: '';
        display: block;
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        min-height: 300px;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .grid-sort-container .grid-entry:hover article:before {
           background-image: url('http://staging.holborn.ca/wp-content/uploads/projects/littleMountain-logo-495x400.jpg');
    }

    We hid the actual image on hover and then replace it with a pseudo container. We then applied the image as background to this container. This will affect the first portfolio item because we use the nth child selector. http://www.w3schools.com/cssref/sel_nth-child.asp

    Example, for the 2nd item:

    .grid-sort-container .grid-entry:nth-child(2):hover article:before {
           background-image: url('http://staging.holborn.ca/wp-content/uploads/projects/ellison-logo-495x400.jpg');
    }

    Cheers!
    Ismael

    #597262

    Gotcha! Thanks so much :)

    #597267

    Hey!

    Glad we got it short out.
    Please let us know if we can do anything else, to assist you further.

    Best regards,
    Basilis

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.