Home Forums Air WordPress Theme Overlay of pictures in portfolio

This topic contains 11 replies, has 3 voices, and was last updated by  BWSM 5 days, 12 hours ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #13718

    KUTCHA
    Participant

    Hello,

    can you help me please? Is it possible to have overlay (when someone put mouse on picture in portfolio) only with little bit grey shadow and the picture will be still shown? Now the picture disappear, change to white background and show only title.

    Thank you for every advice, kind regards, Honza from Prague

    #13722

    BWSM
    Keymaster

    Hi,

    Please try to paste the custom css code to “Appearance > Customize : Additional CSS”

    .grid-item:hover { 
        box-shadow: 0 0 10px #ccc;
    }
    .grid-mask-filled-left .grid-item-con:after, .grid-mask-filled-center .grid-item-con:after {
    display:none;
    }

    Regards!
    Bwsm – uiueux.comTwitterFacebook

    #13733

    KUTCHA
    Participant

    Thank you for your answer. I gave you 5 stars in Themeforest. 🙂

    But the shadow overlay doesnt works. Maybe my description was wrong. I want to change picture (when I put mouse on picture) little bit turn to grey/shadow over picture. 🙂

    You can see it on:

    https://pureline.000webhostapp.com/

    Kind regards, Honza

    #13734

    BWSM
    Keymaster

    Hi,

    Thanks for rating.

    I don’t understand the “grey/shadow over picture” that you talked. Better paste a screenshot to explain it. Thanks!

    Regards!

    #13738

    KUTCHA
    Participant

    I´m sorry for my english. 🙂

    Yes, screenshot will be better.

    Something like on this picture:

    Screenshot

    Thanks, regards!

    #13749

    BWSM
    Keymaster

    That’s ok, my English is not so good 🙂

    Please upgrade custom css as:

    .grid-item-con:after, .product-caption {
        background-color: rgba(255,255,255,0.4);
    }

    0.4 is opacity, it can be changed as 0.1-1.0

    #13932

    piiap
    Participant

    Hi! I followed your tips above and updated my site’s custom css as:
    .grid-item-con:after, .product-caption {
    background-color: rgba(255,255,255,0.8);
    }
    which looks good to me.
    But is it possible that this mouseover effect with text is always on? I mean that can I have the mask and text on top of the post image at all times?

    Thanks!
    -Piia

    #13939

    BWSM
    Keymaster

    Hi,

    Please add the css to show the text by default:

    .grid-item-con-text {
    opacity: 1;
    }

    RG

    #13945

    piiap
    Participant

    Hi and thanks! Now it works perfectly on desktop but text isn’t shown on mobile (iPhone SE, Safari) at all?

    #13948

    BWSM
    Keymaster

    Hi,

    It should work on mobile, plz leave your page url, I’ll check it. thanks!

    RG

    #13957

    piiap
    Participant

    Here it is: http://www.piiap.com/works/

    BR
    Piia

    #13962

    BWSM
    Keymaster

    Please add the custom css also:

    .touchevents .grid-item-con-text {
        display: block;
    }

    RG

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

You must be logged in to reply to this topic.