Add background shadow :after class

  • Hi.
    I’m trying to recreate the image style at the homepage of https://www.lexingtoncompany.com

    They have an image and adds the shadow background as an :after class.
    I’m trying to do the same thing by adding the class “shadow” to the image in the post. It reads the initital shadow class but not the :after class. It doesn’t matter what css I write, it doesn’t look like WordPress is picking it up. Or it chooses to ignore it. Beats me.

    Any ideas?

    https://parklanefashion.com/web

    Regards,
    Marcus

Viewing 3 replies - 1 through 3 (of 3 total)

  • I suggest putting the after element on the .wooslider class:

    .wooslider {
  z-index: 1;
}

.wooslider:after {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: -10px;
  left: 0;
  background-color: tomato;
  background-image: url(https://URL_TO_SHADOW);
  z-index: -1;
}

    obviously you’ll have to play with the dimensions and add your own shadow (remove the background-color). But this should work.

    Thread Starter marcusbrunstrom

    (@marcusbrunstrom)

    Hi lemu,
    Thank you.
    However, that would probably work with the big slider but it won’t work on the small images on the right because they don’t have the wooslider class. Ideas?

    Regards,
    Marcus

    The problem is you’re trying to add the after element to an <img> tag. This doesn’t work. Try wrapping a div around your images and adding the after element to those instead.

    Also don’t forget to set the parents position to relative if you’re using absolute on your afters.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Add background shadow :after class’ is closed to new replies.