Image border/stand-out effect

Home Forums Gillion Theme Image border/stand-out effect

Home Forums Gillion Theme Image border/stand-out effect

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • shootthepianoplayer
    Participant

    Hi,

    I’m looking for some CSS (or maybe an option?) within Gillion to have a kind of image border / stand out effect.

    Here’s an example of what I’d like to achieve:

    View post on imgur.com

    As you can see, there’s a kind of stand-out type effect going on where the image seems to pop out.

    I know there’s a way of achieving this, I just can’t think of the right word for searching for an answer.

    I’d like to set a CSS / theme option for applying this effect to all images (and YouTube videos) added on my posts/pages.

    Any ideas? Thanks.

     

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

    Hi @shootthepianoplayer,

     

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

     

    Could you please share the page URL from your site where the image and video are displaying so that I can help you to achieve it?

     

    Best regards,
    Shufflehound team

    shootthepianoplayer
    Participant

    Here’s a random page on our site: https://filmlifestyle.com/how-to-start-a-production-company/

    I’d like to do a sitewide change that adds the standout border/shading effect to all images and videos.

    You can achieve 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

     

    .post-content img,
    .post-content iframe {
        box-shadow: -2px 2px 20px 2px #afaeae;
    }

    shootthepianoplayer
    Participant

    Thanks for that.

    In a similar vein, how would expand the size of each YouTube embed on a post? I’d like something that makes the YouTube video embed slightly wider than the post margins itself.

    Something like the effect in the below example:

     

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

    You can try achieving that using the below CSS code.

     

    #content article iframe {
        width: 1050px;
        max-width: 1050px;
        position: relative;
        left: -19%;
    }
Viewing 6 posts - 1 through 6 (of 6 total)