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:

    https://imgur.com/4r43AFs.png

    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)

Popular choice

Professional Developers At Your Fingertips!

If you need services beyond standard support, we've got your back!

Services we offer:

Demo setup
Advanced customization
Layout adjustment
Graphic work / visualizations
Custom coding
Full WordPress development and design

Services

What we can offer

  • Demo setup +

    If you'd prefer not to handle the installation yourself or need help getting started, we'll set everything up for you.

  • Layout adjustment +

    We'll help you rearrange sections, adjust spacing, and modify the page structure to fit your needs.

  • Advanced customization +

    More complex styling changes, theme option modifications, and third-party integrations.

  • Custom coding +

    If you need something that's not included in the theme, we can code it for you.

  • Graphic work / visualizations +

    Web design services to create custom sections, pages, and blocks for your theme, plus graphics and visualizations.

  • Full WordPress development and design +

    Full website builds, custom theme development, or plugin creation from scratch.

  • About pricing +

    We'll provide a clear quote based on what you need. No hidden fees.

Professional Developers At Your Fingertips!

Custom Work Form