Docs

[ryskamrr]

Sounds confusing I know but I am trying do something like this site has done.

Home

Their instagram feed in the bottom you can see highlights when toggled over and it also has some text (that I am assuming is an image) over top of it saying Instagram follow along.

How do I place an image over top of an instagram feed (im using instagram feed)?

Thanks

[Friech]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[ryskamrr]

Her you go, thanks.

http://Dev1.opportunityof.com

[Lely]

Hi There,

Thank you for the URL.
Upon checking your sample URL, their instagram feed are custom code on their wordpress theme.

Correct, the text on top is an image. To add same effect on your instagram feed, please add the following CSS on Appearance > Customize > Custom > Edit Global CSS:

.home div#sb_instagram:after {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    text-align: center;
    width: 288px;
    height: 96px;
    background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/11351570_1001662183177250_1670225991_n.jpg');
    margin: 20px auto;
}

Replace the URL of the image.
Also add the following CSS for the image highlight effect:

#sb_instagram #sbi_images .sbi_item:hover {
    opacity: 1;
}
#sb_instagram #sbi_images .sbi_item {
    opacity: .7;
}

Hope this helps.

[Author]

Posts