Blur effect landing page with CSS Grid -2

Image for post
Image for post
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.

Image for post
Image for post
style.css

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

Image for post
Image for post
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.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

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