Creative Our Team Section Using HTML & CSS | CSS Glassmorphism Card Hover Effects

Hey friends, today in this blog you’ll learn how to Creative Our Team section using only HTML & CSS. In the earlier blog, I have shared how to create Login Form Validation in HTML CSS & JavaScript, and now it’s time to create a Creative Our Team section using only a few lines of CSS.

Creative Our Team section according to its content. I have also added a Hover Effect in this Section When The Mouse Cursor On The card opacity is 0 to 1 then it comes Full display.

In this Team Section, as you can see in the preview image, there are shown two states of the output. The first one is the 0.5 opacity and the second one is when you put Mouse Cursor On The card opacity is 100%.

Video Tutorial of Team Section Using HTML & CSS

In the video, you have seen the demo of a Creative Our Team Section Using HTML & CSS and knew how I created it using HTML & CSS. I hope you’ve understood the codes and concepts behind creating this Creative Our Team Section Using HTML & CSS.

In the CSS codes, inside on keyup event, first I got the All Text H3 of the Name. Name Section redy property Display. After I got the clear Name Display, Then Adjust Img what where You want the Set Cover of Position.

I have only explained only main things on this blog but in the video, I have explained each CSS line with written comments. If you want to understand which line of code is doing what then please watch the above video.

Creative Our Team Section Using HTML & CSS [Source Codes]

To create Creative Our Team Section. First, you need to create two Files: HTML & CSS files. After creating these files just paste the following codes into your file. You can also download the source code files of this Our Team Section from the given download button.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

That’s all, now you’ve successfully created an Our Team Section using HTML & CSS . If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

HTML Code:

Glassmorphism Card Hover Effect

Creative Persons
New Developer

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    flex-wrap: wrap;
    background: #00ffbf;
}

section::before
{
    content: '';
    position: absolute;
    bottom: 10%;
    right: 10%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(#f9d924,#ff2c24);
    animation: animate 5s ease-in-out infinite;
    animation-delay: -2.5s;
}

section::after
{
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 100px;
    height: 100px;
    border-radius: 10%;
    background: linear-gradient(#f9d924,#ff2c24);
    animation: animate 5s ease-in-out infinite;
    animation-delay: -2.5s;
}

@keyframes animate
{
    0%
    {
        transform: translateY(20px);
    }

    50%
    {
        transform: translateY(-20px);
    }
}

.container
{
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 40px 0;
}

.container .card
{
    position: relative;
    width: 300px;
    height: 400px;
    background: rgba(255,255,255,0.05);
    margin: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
}

.container .card .content
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0.6;
    transition: 0.5s;
}


.container .card:hover .content
{
    opacity: 1;
    transform: translateY(-20px);
}

.container .card .imgbx 
{
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border-radius: 5px solid rgba(0,0,0,0.25);
}

.container .card .content .imgbx img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container .card .content .contentbx h3
{
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 15px;
    text-align: center;
    margin: 20px 0 10px;
    line-height: 1.1em;
}

.container .card .content .contentbx h3 span
{
    font-size: 12px;
    font-weight: 300;
    text-transform: initial;
}

.container .card .sci
{
    position: absolute;
    bottom: 50px;
    display: flex;
}

.container .card .sci li 
{
    list-style: none;
    margin: 0 10px;
    transform: translateY(40px);
    transition: 0.5s;
    opacity: 0;
    transition-delay: calc(0.1s *var(--i));
}

.container .card:hover .sci li 
{
    transform: translateY(0px);
    opacity: 1;
}

.container .card .sci li a
{
    color: #fff;
    font-size: 24px;
}

.container .card .sci li a:hover
{
    color: #555;
}

Download Here

You have to wait 40 seconds.

Creative Our Team Section Using HTML & CSS | CSS Glassmorphism Card Hover Effects | Coding Karunadu

Video Tutorial of Team Section Using HTML & CSS

You might like this:

How to Create a simple animated portfolio

How to Create a Music website
How To Create A Gallery Section
Glassmorphism Effect Digital Clock

Creative Our Team Section Using HTML & CSS [Source Codes]

Creative Persons
New Developer

Download Here

Contact Form

Creative Our Team Section Using HTML & CSS | CSS Glassmorphism Card Hover Effects | Coding Karunadu

Video Tutorial of Team Section Using HTML & CSS

You might like this:

How to Create a simple animated portfolio

How to Create a Music websiteHow To Create A Gallery SectionGlassmorphism Effect Digital Clock

Creative Our Team Section Using HTML & CSS [Source Codes]

Creative Persons New Developer

Download Here

Contact Form

How to Create a Music website
How To Create A Gallery Section
Glassmorphism Effect Digital Clock

Creative Persons
New Developer