Hello friends, in this blog you will learn how to make glowing Card Hover Effect using html and CSS. You may have seen different types of cards, but you will learn how to make glowing hover effect cards in this blog.
This is a social media card. There is a way to display the title and description. This card gives control over the preview that users see on their news feed. By clicking on the social media card, the users reach their selection page so that the social media Can increase engagement and referrals on your site. Which is called social media card. You will learn this social media hover effect. Which is created using html and CSS.
You can see in this image 3 cards are designed, this card is made in a single line and this card is rotated which you can see these three cards have a social media icon on top of which the mouse The card is glowing when carried, the lower description of this card is written, which opens the description when moving the mouse over the card, which looks beautiful and attracts.
You can understand by watching the video of this card, I mean to say that if you are having difficulties in understanding, then you can understand by watching this card Hover Effects video which is given below video.
Video Tutorial of Card Hover Effects Using html and CSS
You must have understood by watching this video how it has been designed which is made with the help of html and CSS, I hope you will understand the code of this card, how it has been done
We know about the html code of Card Hover Effects. We have taken a div inside the body whose class name is given as container and the three div inside this container have same class name. Is the class name face face1 and face face2 is given a div inside the class face face1, whose class name is given the content, i tag is taken inside this content here i tag is used for link of icon which is inside This i tag is linked to the icon by giving the class name. The class name inside this i is fa fa-envelope. The icon of this mail is visible.
And the h3 tag is taken under this i tag, h3 is called heading, inside which Envelope text is written.
The class face has a div inside face2, whose class is named content, inside this content, a p tag and another tag is taken. The tag p is called pergraph, it is called the inline block element, which when writing this tag It takes up the entire space of that link, so it is called inline block element, a tag is called anchor tag. This is also called inline element. It does not take up the entire page of the line. If this tag is followed by another a tag Leng gets this tag in front of that tag so a tag is called inline tag
The text is written inside the tag p, which is seen after hovering above and has taken a tag below this tag which has a type button and inside it the text of Learn More is written.
A similar tag has been taken inside the second div whose class name card is written in it, inside the i tag, the class name fa fa-youtube is written which is the class of the icon of the youtube and also inside the class name card of the third div. took the i tag named class fa fa-thumbs-up
We know about the css of Card Hover Effects, we first zeroed the margin and padding to the body and gave this body the property of color and display flex, followed by the width position: relative to the class container; Used the property like transform and transform-style, how it has been styled to all other tags and classes, and the card has been further beautified by designing hover glowing which you are seeing in the image above. Read this blog And by viewing tutorials, you can easily make this type of card.
Card Hover Effects Using Html And CSS Source Codes
We know about the html code of Card Hover Effects. We have taken a div inside the body whose class name is given as container and the three div inside this container have same class name. Is the class name face face1 and face face2 is given a div inside the class face face1, whose class name is given the content, i tag is taken inside this content here i tag is used for link of icon which is inside This i tag is linked to the icon by giving the class name. The class name inside this i is fa fa-envelope. The icon of this mail is visible.
And the h3 tag is taken under this i tag, h3 is called heading, inside which Envelope text is written.
The class face has a div inside face2, whose class is named content, inside this content, a p tag and another tag is taken. The tag p is called pergraph, it is called the inline block element, which when writing this tag It takes up the entire space of that link, so it is called inline block element, a tag is called anchor tag. This is also called inline element. It does not take up the entire page of the line. If this tag is followed by another a tag Leng gets this tag in front of that tag so a tag is called inline tag
The text is written inside the tag p, which is seen after hovering above and has taken a tag below this tag which has a type button and inside it the text of Learn More is written.
A similar tag has been taken inside the second div whose class name card is written in it, inside the i tag, the class name fa fa-youtube is written which is the class of the icon of the youtube and also inside the class name card of the third div. took the i tag named class fa fa-thumbs-up
We know about the css of Card Hover Effects, we first zeroed the margin and padding to the body and gave this body the property of color and display flex, followed by the width position: relative to the class container; Used the property like transform and transform-style, how it has been styled to all other tags and classes, and the card has been further beautified by designing hover glowing which you are seeing in the image above. Read this blog And by viewing tutorials, you can easily make this type of card.
If you want to get the source code of this Card Hover Effects, then you can get the code whose code is given in the two files below, one is html and the other is CSS file by scrolling both these files and copy the file to your file. Paste into it.
Post a Comment