Portfolio Overlay Content

Home › Forums › Jevelin Theme › Portfolio Overlay Content

Home › Forums › Jevelin Theme › Portfolio Overlay Content

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    RESOLVED Posts

  • cmurockstar
    Participant

    I am working with your Portfolio Overlay style as shown here (first example on https://jevelin.shufflehound.com/portfolio-page/overlay/).  I love this design.  However, can I:

    1. remove the spyglass icon
    2. make the entire image clickable like in some of the other examples
    3. change/add an effect on hover (e.g. add a blur to the background image in addition to/instead of the zoom)
    4. Disable the “link” on the tags (but still show the tags)

    Thanks!

    -Josh

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

    Shufflehound Support
    Moderator

    Hi Josh,

     

    I hope you are well today and thank you for your question.

     

    You can try achieving this from the portfolio element settings using its various options as shown in the attached screenshot.

     

    Best regards,
    Shufflehound team

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

    cmurockstar
    Participant

    Thanks for the speedy reply – but i didn’t see any of those options that:

    • Visually look like option 4 (size and positioning)
    • without the spyglass icon
    • the entire image clickable
    • Disable the “link” on the tags displayed (but still show the tags)*
    • change/add an effect to the original image (e.g. add a blur to the background image in addition to/instead of the zoom)

    *all examples have the tags as links. I want/need to disable this

    Shufflehound Support
    Moderator

    There isn’t any exact theme option that matches all of your stated requirements so i what i suggest you try the various provided theme options and just use the options that fulfil most of your requirements.

     

    Then share me the page URL from your site where it is displaying and tell me which options are remained to implement so that i can check whether it is possible to implement them developing custom code.

    cmurockstar
    Participant

    Hi Shufflehound,

     

    I have to say (first off) your support is wicked fast/good.  So props on that.

     

    Here is my playground i am building on: http://hailpern.net/joshua2017/portfolio/

     

    This is visually 99% of the way there (it is using Overlay 4).  But functionality wise, there are 3 tweaks required (and 1 would be nice tweak):

    1. the whole overlay needs to be clickable – going to the portfolio project, not just the link icon.
    2. remove the link & zoom icon
    3. visually leave the categories, but remove the link – so it is just text.
    4. (would be nice) to be able to change the CSS effect on hover from a zoom to a blur+desaturate.  If you create a plugin or something custom, i could then tweak this as needed, but knowing what to tweak here in CSS is the question.

    But like i said above, the first 3 points are the critical ones.

     

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

    Shufflehound Support
    Moderator

    You can try achieving it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    .sh-portfolio-overlay4  .sh-overlay-item:first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.sh-portfolio-overlay4  .sh-overlay-item:last-child,
.sh-portfolio-overlay4  .sh-overlay-item:first-child .sh-overlay-item-container {
    display: none;
}

.sh-portfolio-overlay-style-overlay4 .sh-portfolio-image:hover .sh-portfolio-image-position {
    -webkit-transform: none;
    transform: none;
}

.sh-portfolio-overlay4{
    background-color: rgba(91, 96, 97, 0.8)!important;
}

    cmurockstar
    Participant

    Thanks!  I made some minor tweaks to use the filter effects for blur and grayscale:

     

    .sh-portfolio-overlay-style-overlay4 .sh-portfolio-image:hover .sh-portfolio-image-position {
    /*-webkit-transform: none;*/
    /* transform: none; */
    filter: grayscale(100%);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    }

    .sh-portfolio-overlay4{
    /* background-color: rgba(91, 96, 97, 0.8)!important; */
    }

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

    gmdigitalninja
    Participant

    Yes yes yes! This is such an awesome theme with awesome support!

    I wanted to do exactly the same thing – the original solution + your tweaks = PERFECTION!

    Thanks again

    Shufflehound Support
    Moderator

    @gmdigitalninja Thank you for your kind reply and you are always welcome here 🙂

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)