Introduction of Hovering Detail Card CSS
We are again here with our latest and amazing project, the hovering detail card CSS. This project is made with the use of two languages: HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet). In this project, there will be some images on screen, and when the user hovers over a particular image, the details of that image will appear with some transition effect. This is very useful, as you can use it on your website to store the data of any product on a card or for another purpose, like introducing yourself on a card with a hovering effect to show the details.
Now let’s start together to make this project with the help of HTML and CSS. This is going to be so interesting to make this card. You can add styling to the hovering effect according to your preferences. This will be just an example to show you how to make a detailed hovering card. We will make it step by step by explaining the basic concepts of HTML and CSS so that a fresher can also understand it without any doubt. For any doubt, you can contact us through the contact details given in the footer of the page.
HTML (Hypertext Markup Language)
First, we are going to create the structure of the detail hovering card with the help of HTML (Hyper Text Markup Language; this is a markup language used to make a web page). You can write their code in any text editor. I am using VS Code, and the output will be shown in the browser. In this, we will first give the title of the page in the title tag. Then we will move toward the main content of the page.
We will make a parent div in which all the images will be implemented and also make some child divs for the number of images we want, and in that box there will be two small divs. One div for the image, in which the image will be inserted in the img tag (which is used to insert the images), and another for their name and some information will be given.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css" /> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> <title> Movie Card Hover Effect</title> </head> <body class="flex-container"> <div class="card"> <div class="image-box"> <img src="https://resizing.flixster.com/wV52XCdjpWAwT4_kgnKe6hhj0QA=/ems.cHJkLWVtcy1hc3NldHMvdHZzZWFzb24vNTQ4YTNmZTgtMTc4MC00MzBhLTg0NDYtM2JiNGI1ZmMwMzk0LmpwZw==" alt=""> </div> <div class="text-box"> <div class="main"><span>The Boys</span></div> <div class="sub"><span>Season 1</span></div> </div> </div> <div class="card"> <div class="image-box"> <img src="https://www.refinery29.com/images/10006376.jpg?format=webp&width=720&height=864&quality=85" alt=""> </div> <div class="text-box"> <div class="main"><span>The Boys </span></div> <div class="sub"><span>Season 2</span></div> </div> </div> <div class="card"> <div class="image-box"> <img src="https://pbs.twimg.com/media/FNgNL5zVkAIken_.jpg:large" alt=""> </div> <div class="text-box"> <div class="main"><span>The Boys</span></div> <div class="sub"><span>Season 3</span></div> </div> </div> <div class="card"> <div class="image-box"> <img src="https://cdna.artstation.com/p/assets/images/images/020/067/604/large/diiego-designer-the-boys-copia.jpg?1566234003" alt=""> </div> <div class="text-box"> <div class="main"><span>The Boys</span></div> <div class="sub"><span>Season 4</span></div> </div> </div> </body> </html>
CSS (Cascading Style Sheet)
After making the structure of that page, we will now do some styling. Apply the hovering effect with the help of CSS (CSS is used to apply styling to the HTML page). This is used to implement the styling on the HTML page, and we have to link it to the HTML page. In this, we will make the background black. Take the parent div to the center of the screen, and then proceed to the styling of the card.
In this, we will adjust the size and position of the image’s div. Give the border property to the child div. Make the image in the div fit without overflow by applying the object-fit method. Now we will apply the hovering effect, in which the scale of the image will be increased in the default case and its details will be hidden. When users hover over a particular item, the details will be visible, and the scale will return to normal.
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background-color: #090909; display: grid; place-items: center; font-family: Poppins; } .card { width: 250px; aspect-ratio: 1/1.3; position: relative; } .flex-container { display: flex; justify-content: center; } .flex-container > div { background-color: #f1f1f1; margin: 10px; text-align: center; } .card .image-box { width: 100%; height: 100%; overflow: hidden; } .card .image-box img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0) brightness(1); scale: 1.2; transition: scale 2s ease-in-out, filter 1s ease-in-out; } .card:hover .image-box img { filter: grayscale(1) brightness(0.7); scale: 1; } .card .text-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: rgb(255, 254, 254); } .text-box :is(.main, .sub) { height: 34px; line-height: 34px; overflow: hidden; } .text-box .main { font-size: 26px; font-weight: 600; text-transform: uppercase; position: relative; } .text-box .sub { font-size: 14px; font-weight: 300; } .main span, .sub span { display: block; transition: transform 0.5s ease; } .main span { transition-delay: 0.2s; transform: translateY(100%); } .sub span { transform: translateY(-100%); transition-delay: 0.5s; } .card:hover .text-box :is(span) { transform: translateY(0%); } .text-box::after { position: absolute; content: ""; top: 52%; left: 50%; width: 102%; height: 3px; transform: translate(-50%, -50%) scaleX(0); transform-origin: left; transition: 0.5s ease; background-color: rgb(248, 35, 11); } .card:hover .text-box::after { transform: translate(-50%, -50%) scaleX(1); }
Output of Hovering Detail Card CSS
Finally, we have made the fully responsive hovering detail card CSS with the help of HTML (Hyper Text Markup Language; this is a markup language used to make a web page). You can make such a project by taking ideas from here. Make your own card hovering effect, and I hope that will be better than us. If you want the source code, click on the button given below to download it.
For more explanation, click on the link given below to watch the video.
You can also check: