Blur effect landing page with CSS Grid -2

CSS

Welcome to part-2 of the series. You can find part-1 here.

First we will add styles for hover of the content. After that we are adding styles to move the content to the middle and over the image. Here, we are using the top, left properties to move the content to the center. We are also using a bit of CSS grid to center align.

style.css

Now our content is centered and the hover effect is working properly.

Hover effect

You can read the rest of the article from my site. The link for the same is below.

You can find the github repo for the same here.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

CI/CD with Github Actions to deploy on Github Pages

BMK’s Tribute to DevOps Enterprise Summit

Let’s do the Fast hunt using Neo4j 😎

Code Sharing: A recipe for how we quickly cooked up the Tasty app

Automated Free Stock Trading (Mostly)

YAML for Web Developers

ROI Formula: A Detailed Guide on ROI Calculation

The chasm of internal communications tools

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Modals/Popups — the easiest way!

Make a Background Image blurred & show your image

Motion Path — Magical Path Animation

Using Custom Cursors with Javascript for a Better User Experience