In this video we will see to make this Product card UI design using html and CSS also we will learn how to transform that image while hover on that card.
Image : It is been downloaded from www.nike.com
and later layered masked with the help of photoshop.
Source Code:
CSS:
*{
margin: 0;
padding: 0;
font-family: Cambria, Cochin, Georgia, Times, ‘Times New Roman’, serif;
font-size: 1rem ;
}

h1 , p{
margin: 0;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}

.container{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(139, 230, 241);
}

#html