Okay
  Public Ticket #338525
Portfolio item hover opacity
Closed

Comments

  • Michelle started the conversation
    December 19, 2014 at 2:41am

    Hi there, 

    I'm going to use the code below to remove the "View Larger" and "More Details" buttons on the portfolio thumbnails. Also wondering how to:

    a) remove the colour hover effect completely

    b) Change the aplha channel opacity on hover action

    Thanks so much,

    Michelle

    REMOVING BUTTONS CODE

    .portfolio-items .col .work-item .work-info a { position: absolute; display: block; width: 100%; height: 100%; text-indent: -9999px!important; top: 0px; left: 0px; background-color: transparent!important; border-radius: 0px!important; } .portfolio-items .col .work-item .work-info a.pp { display: none!important; }

  •  9,408
    Tahir replied
    December 19, 2014 at 5:36pm

    Hey!

    Can you provide the page url . 

    Thanks

     Salient Support Team 

  • Michelle replied
    December 20, 2014 at 3:00am

    theprecinct.com

  •  9,408
    Tahir replied
    December 22, 2014 at 4:04pm

    Hey Again!

    Add this into the Custom CSS box located in your Salient Options panel :
    .portfolio-items .col .work-info-bg ,.portfolio-items .col .work-info {
    display: none !important;
}
    Thanks 

     Salient Support Team 

  • Michelle replied
    January 5, 2015 at 5:54am

    Hi Tahir, thanks for the code - while it did remove the the hover effect it also removed the ability to link the tile to a portfolio page once clicked. Do you have code that simply changes the hover opacity rather than removing it completely?

    Thanks so much,

    M

  •  9,408
    Tahir replied
    January 5, 2015 at 3:29pm

    Hey Again!

    Use this instead: 

    .portfolio-items[data-col-num="elastic"] .work-info-bg {
    opacity: 0 !important;
}

    Thanks 

     Salient Support Team