Archived topic
Adding styling (drop shadows) to the featured image pages
5 replies · Started by Ian on August 16, 2021
Could you please let me know how I can replicate the drop shadow from the home page slider to the featured images in the header on pages like this?
Would it be easier to just drop some css (not sure which element to apply this to) or recreate the header in GB?
Hi Ian,
The shadow used on your slider plugin is an image.
You can add it in by modifying the structure of the header element HTML.
You can wrap the img with <div class="feat-img-wrap"> your img here </div> and then add this CSS:
.feat-img-wrap{
position:relative;
width: fit-content;
height: fit-content;
margin: 0 auto;
}
.feat-img-wrap:after {
content: "";
background-image: url(https://yourdomain.com.au/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Widget/Shadow/ShadowImage/Assets/shadow/curved.png);
background-size: 100%;
background-repeat: no-repeat;
height: 50px;
width: 100%;
position: absolute;
top: 100%;
left: 0;
}
.feat-img-wrap img {
display: block;
}Change yourdomain.com on the url.
Thanks Elvin. I'll give that a go.
Cheers
No problem. Let us know if you need further help. :D
Thanks Elvin, worked like a treat :-)
Thanks for letting us know. Glad you got it sorted. :D
