How to create a spotlight effect?
Applying Transitions And Animations Using CSS
CSS can be weird sometimes, but it can be pretty awesome too. Let’s create a spotlight effect with some CSS.
First of all, we will set up our HTML markup as follows:
Here, we have a ‘div’ container that will act as a ‘wrapper’ for our elements. Inside the container, we have a ‘div’ with a class ‘blur’ which will be used to blur the spotlight which we will be creating in a minute. The ‘div’ having a class ‘img_contain’ will be used to wrap the image and it’s related elements.
Now, let’s move on to CSS.
This container wraps every other element and that’s why we have given it’s position as ‘relative’. By doing so, we will able to position its child elements ‘absolutely’ inside this container.
You might have noticed that we have defined a ‘transform style property and its value is set to ‘preserve-3d’. That’s because whenever we will apply a transform to the child elements of this container, CSS will preserve their position in 3d space. By default, the ‘transform style is set to ‘flat’.
Next, we will style the image container and play with some pseudo-elements.
The image container is a child of the main ‘container’ and so, its position is ‘absolute’ i.e. it will be positioned relative to the position of the parent element. To center this image container, we have used a naive way by specifying the ‘left’ property as 50% to offset the elements by 50% of the width of the parent element along the x-axis and then by using ‘translateX( -50%)’ to offset it backward by 50% of its width. Yeah, you can do it by specifying the ‘display: flex’ property in the parent container, but this works!
Now, you can add an image in the container as well as some text and style it in a way pleasing to you.
Up until now, your output should look something like this:
Now, let’s create a spotlight.
The first thing required for creating a spotlight effect is a ‘pseudo element’ such as (:: before) and (:: after). We will use the pseudo-elements of the main container for creating this effect. One thing to keep in mind is that pseudo-elements are not actually a part of the DOM. That’s why they are called ‘pseudo’. They are usually used to style elements without adding extra markup.
Primarily, the pseudo-elements will be in the form of a basic rectangle and the transform-origin will be at the ‘center’. But we don’t want that. Let’s see what we are trying to create.
In order to get this shape, we have to change the origin of the transform from center to ‘bottom’. After that, we will rotate the rectangle along the x-axis by 70 degrees by using rotateX(70deg). Also, after we rotate the rectangle, we have to also make it tilt towards left or right. This is possible by using the ‘skew’ transform property. It will tilt the rectangle as per the angle and the axis specified, which in our case is skewX(17.5deg).
We must make two of these parallelograms. That’s why we have used two pseudo-elements. One will tilt to the left and another will tilt to the right. For making it tilt to the right, just write skewX(-17.5deg) and it will tilt to the opposite side with respect to the x-axis.
Next, we have applied a linear gradient to both the pseudo-elements.
In the end, we will get a shape that resembles a spotlight.
Did you notice the edges look a little bit blurred? How can we achieve that? For that, we have an element with a class ‘blur’ which is a child of the main container.
The property's backdrop filter allows us to blur the elements or area which is behind the element to which this property is applied. This element is having a z-index of 0, so the elements which are behind it having a z-index less than 0 will be blurred. That’s why we have set the z-index of the spotlight shape to -1.
Now, we will add a glow to the image by using the pseudo-element of the image container and applying a linear gradient to it.
After applying some transitions and animations, this is how it will look like.
Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer
