change ‘box-shadow’ to ‘none’
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: none;
background: #444;
}
Thanks for your help – I’ve changed the CSS stylesheet code as you suggested but the image shadow is still there, both on the blog previews and also when you click through to the post – it’s only on the featured image, not on the image embedded in the post. Is there another change I need to make to the code?
If it helps to have a link to the site it’s http://www.hattonrow.co.uk
Many thanks
That does help a great deal. thank you. and sorry for the confusion, my last answer was based merely on the code you posted originally and the fact you said ‘shadow’…after looking at your actual code i see what you meant by gradated.
try adding the following to your custom css or at the bottom of your child theme’s css file.
.post-thumbnail:after {
background-image:none;
}
but more than just removing said shadow because you don’t like its looks, let’s keep in mind why it’s there…to make the text on top of it visible.
by removing the gradated shadow the text bleeds into the background of some of your images. on dark images it may be fine, however on lighter, or white, images the text will be virtually impossible to see.
you can change the color with this bit of CSS.
.smr-post.has-post-thumbnail .entry-header .entry-title,
.smr-post.has-post-thumbnail .entry-header .entry-title a {
color: #666;
}
in that example i have changed it to grey, but even that isn’t a full-proof option given the potential range of colors in your post images.
apologies for the unsolicited design ux lesson. hope that all helps
