Every time, I get to work with CSS, I am amazed by some new property that I did not know before. In this article, I have compiled some CSS tricks that I have picked in the last few days while designing yet another landing page.
#1 Hover animation
Have a random image. Hover over the image. Scale the image with a thick border.
See the Pen Hover image by Vijay Thirugnanam (@vijayst) on CodePen.0
The :hover pseudo-class makes it possible to add the desired behavior. Specify the scale in a CSS Transform to enlarge the image.
#2 Blurred image
It is easy to blur an image with the filter property. We can also specify a clip-path property to cut the image along the path.
See the Pen Blur image by Vijay Thirugnanam (@vijayst) on CodePen.0
#3 Place text at 30% height
Centering text within a container is easy with flex. But how do we place text at 30% of the container height? We use absolute positioning for this.
See the Pen qxYXjp by Vijay Thirugnanam (@vijayst) on CodePen.0
For absolute positioning to work, the container should have a position of relative. Also, translate transform ensures that the center of the text is positioned and not the top left of the text element.
#4 The :not pseudo class
The :not pseudo-class is a useful selector to avoid specifying margins for the first or last element.
See the Pen QQrMBj by Vijay Thirugnanam (@vijayst) on CodePen.0
Equally useful are the :first-child and the :last-child pseudo-class.
#5 Display a circle
SVG is useful to display complex shapes. But if you want something circular, we can do it with a few lines of code.
See the Pen qxYPVw by Vijay Thirugnanam (@vijayst) on CodePen.0
To make a circle, we just add border-radius of 50%. But the above CodePen has combined a few other techniques to great a nice hover effect on the circle. We place a text (title) at 30% of the circle height and make its opacity to 0. Then when we hover on the circle, we move the text to the center and change its opacity to 1. We specify a transition to the hover effect creating a nice reusable animation.