Pseudo element not appearing

Design help Custom code
1

Im trying to create a similar effect to one seen on Awwwards where there is a sliding image carousel. The track has some sort of :before element that generates a box that is coloured the same as the BG and cuts off some of the images. Im trying to achieve this same effect but i cannot seem to get the custom code to work on my own site.

I have colour the element and zoomed out on the awwwards site which you can also see here Create Award Winning Animation and Interaction Design In Webflow (Online Course)

Screenshot 2021-08-20 194451
Screenshot 2021-08-20 1944511920×1109 60.5 KB

Here is my site Read-Only: Webflow - 3D Project

2

Nice looking site you’re building there!

I don’t see any :before pseudo elements on your carousel, can you link the css you’re using for the pseudo element?

3

Hey sure thing, the pseudo element is actually in a class called splide that ive put in the header.

<style>
.splide::before {
		content: '';
    top: 0;
    right: calc(100% + 1px);
    width: 100%;
    height: 100%;
    background-color: #33fbb8;
    z-index: 99;
		}
</style>
4

Aha looks like you’re just missing the ‘display’ attribute. Try adding display: block; (which I’m assuming is what you’re going for).

It also lookslike you want to position it absolutely, so I would add position: absolute as well, and make sure that .splide is set to position: relative;

5

Oh man thats done it, thank you so much. Can i also ask your assistance on something else. Ive got it to appear, but how would i make it scale with the page so that when you shrink the browser the position of the psuedo is always in the same relative position and not cutting off the cards.

Easiest way to describe is just this page below, if you scroll to the section with the pseudo element, and then scale the browser out to like 25% you can see what the behaviour is.

6

Took a while to figure out which pseudo element you were talking about there.

The pseudo element is just set to be the same width as the parent, and display to the left of it, which is what right: calc(-100% + 1px); does. It never resizes.

What they DO resize, is the carousel holding the cards, at larger screen sizes it’s set to be quite small in the middle of the screen, and they simply set the overflow to visible, and use the card to hide those overflow elements on the left.

So essentially what you’d need to do is on large screens set your carousel to margin: auto; max-width: about 800px; and overflow: visible. And then on smaller screens have it be normal/full width.

That seems to be how they’ve done it. Hope that helps!

7

You sir, are a master, thanks very much for your help, there is no way i would have got that on my own, i actually had to set the pseudo class to the CMS container item as the div above it .splide was moving the before to the edge, but its working now. I also had to add some more to the calc class as i needed it to be a few pixels over, but thats working now as well!

8

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.