Remove shadow from individual images

  • Hi Everyone,
    I recently started using WordPress to create travel blog and ran into a problem I have not been able to solve searching on my own. I would like to add a series of small images with whitebackgrounds at designated points throughout my blog post. However wordpress is displaying them with an inner shadow effect which detracts from them blending in with the page. I have found some solutions involving CSS code to modify the entire theme but I am just interested in removing the shadow from specific images, does anyone know a way?
    Here is a screenshot of the problem

    Here is the blog post in question:
    https://railscapestravel.com/2017/06/11/planes-trains-and-automobiles-to-machu-picchu/
    Thanks!
    -Nikos

    • This topic was modified 7 years, 8 months ago by railscapes.
Viewing 3 replies - 1 through 3 (of 3 total)

  • Add a second class to the images that you don’t want to have a shadow
    [class*=”wp-image”] .noshadow {box-shadow: none;
    }

    Thread Starter railscapes

    (@railscapes)

    Thanks! That got me going in the right direction, I have managed to get the shadow and border to go away but they still show up if I hover over the image. The code I found searching online did not help with that. This is what im using right now, only the first two parts have any effect: 

    .noshadow {box-shadow: none; border:none!important; background:transparent!important; webkit-box-shadow: none;
moz-box-shadow:none;}

    You need to add the pseudo code :hover as well as the regular selectors. .noshadow,.noshadow:hover {box-shadow:none} –

    also if you use both classes in one selector ie “[class*=”wp-image”].noshadow”, “[class*=”wp-image”].noshadow:hover” you can lose the !important on the border and background rules since the [class*=”wp-image”] is adding the box-shadow and the border to all images. By using both selectors in one you are making sure that the [class*=”wp-image”] isn’t overriding it in other style sheets (responsive or bootstrap) as well.

    Try using “none” rather than transparent and border: 0 if that still isn’t giving you what you want.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Remove shadow from individual images’ is closed to new replies.