Clickable Portfolio images and titles

This topic contains 8 replies, has 2 voices, and was last updated by  CTHthemes 10 months, 2 weeks ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #16207

    platypidesigns
    Participant

    Support Expired

    Hi there,

    Fun and Adventure Experiences

    On the landing page for our fun and adventure programs we are using a portfolio grid element in visual composer. This is a great tool and we have been able to customize the look and feel the way we want.

    Top Priority:
    The one item we’re struggling with is that website visitors expect that the entire blue roll over image for a portfolio item is a link to the page. However it is just the text that is the link. The cursor when you mouse over the image is a HAND which indicates a link but unless you are clicking on the text nothing happens. Can we have the entire blue rollover image box be a link to the page?

    As well if that’s possible can we also have the blue box with the title that is underneath the image as a clickable area and not just the text link? That way people can click anywhere on the image or title and get to the right page for the portfolio.

    Thanks,
    Tanya

    Attachments:
    You must be logged in to view attached files.
    #16217

    CTHthemes
    Keymaster

    I am sorry, it’s not possible.

    Thanks

    #16225

    platypidesigns
    Participant

    Support Expired
    This reply has been marked as private.
    #16285

    CTHthemes
    Keymaster

    You can use this custom style for the bellow box.

    
    .img-title {
       padding: 0;
    }
    .img-title h5 {
       margin-bottom: 0;
    }
    .img-title h5 a {
       display: block;
       width: 100%;
       padding: 20px;
    }
    
    #16298

    platypidesigns
    Participant

    Support Expired

    Very cool. That works for the bottom blue text under the image. Thanks so much for that.

    What would it cost for us to have the image part above be a full link too?

    #16299

    platypidesigns
    Participant

    Support Expired

    Hi there

    I played around with the code and I got the image to link. All is well. Thanks.

    #16308

    CTHthemes
    Keymaster

    Hi, what’s is the code? Would you post it here if some one else need?

    Thanks.

    #16383

    platypidesigns
    Participant

    Support Expired

    Ofcourse.

    The code isn’t perfect but this is what I used with the size of image that I have for the featured image.

    
    /*this is for the image rollover effect and text link.  This makes entire box linked*/
    .img-caption {
       padding: 0;
    }
    .img-caption .content h5 {
       margin-bottom: 0;
    }
    .img-caption .content h5 a {
       display: block;
       width: 100%;
       padding: 110px;
    }
    
    • This reply was modified 10 months, 2 weeks ago by  CTHthemes.
    #16392

    CTHthemes
    Keymaster

    Thank you.

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

You must be logged in to reply to this topic.