Beautiful UI Grid for Team

Beautiful UI Grid for Team

Hello friends I am going to share with you a very Beautiful UI Grid for Team  using Pseudo element in css.

You can use this with you team presentation for your website or either you can use it to show your business service that you provides to your clients or customers. Many places you can use it to make your website beauty more enhance. These beautiful image hover effect can be used with image gallery and as a simple hover effect for images or as a block hover effect.

Here you will se how I am using many new css properties like display: flex; flex-direction: row; and word flex-wrap: wrap; . where display: flex; is used by developer to make their multi grid system in row by using property flex-direction: row; that assign a row to grid with same height. It is a very usefull properties in nowdays.

In this post I am using [data-column=”n”] to assign particular css property to a particular grid column by replacing nth child value to grid number.

Pseudo element is used to provide various effect on hover  like when we hover on it faded image will get more clear and zoom in more and social media icons will appear slowly with transition using transition properties.

Now lets start coding :

HTML Structure:

Stylesheet: