When you go online, and visit different websites, you will always come across websites that have an image with text at either the top or bottom of the image. A profile picture on a platform with bio text at the bottom is a perfect example of this context.
The image with the text is called a CARD in HTML and CSS. A card contains a title, a picture (photo), and descriptive information. This article is about how to create a card (image) that responds by either moving up or down once hovered over. It will serve both beginners and experts in HTML and CSS.
Preview of the Final Responsive Card Output
We will create the below responsive card, you will notice that once you move your cursor over any of the three images, the image responds by either moving up or down, some exciting but basic animations.
Creating the Responsive Card from Scratch
We will first create the structure of our project using the markup language, HTML, then proceed to style it up using CSS.
Step-by-Step Process of Creating the Responsive Card
- Download 3 Pictures of your choice (Click here for free pictures:(https://unsplash.com/s/photos/forms)
- Create a folder and give it a name of your choice (I named my folder “Box or Card”).
- Open the folder you just created and inside it create another folder, give it a name of your choice, and move the pictures you just downloaded here.
- Open Vs Code Editor, go to file select open folder then choose the folder you just created.
- While on the Vs Code Editor, create a new file and name it index.html. The file name must have the extension .html
- Create a new file and name it style.css. The file name must have the extension .css and link the two files as seen in the below syntax
- You should have something like the snip below; I named my pictures; Growth, Development, and Reproduction.
HTML Syntax
Open index.html and enter the below code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOX OR CARD</title>
<link rel="stylesheet" href="style.css">
</head>
<h2>RESPONSIVE SERVICES CARD BY KINGSGEE</h2>
<body>
<H3>DISCUSSION ON GROWTH, DEVELOPMENT AND MATURATION</H3>
<div class="container">
<div class="box">
<img src="Growth.jpg" alt="">
<h3>Growth</h3>
<p>Growth is the change in physical characteristic of an individual
increase in weight or length
</p>
<button class="button">See more</button>
</div>
Output:
Continuation of the HTML Syntax
To add more images add the code below;
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOX OR CARD</title>
<link rel="stylesheet" href="style.css">
</head>
<h2>RESPONSIVE SERVICES CARD BY KINGSGEE</h2>
<body>
<H3>DISCUSSION ON GROWTH, DEVELOPMENT AND MATURATION</H3>
<div class="container">
<div class="box">
<img src="Growth.jpg" alt="">
<h3>Growth</h3>
<p>Growth is the change in physical characteristics of an individual
increase in weight or length
</p>
<button class="button">See more</button>
</div>
<div class="box">
<img src="Development.jpg" alt="">
<h3>Development</h3>
<p>This refers to the change in a structure such as thoughts or behavior of an individual
</p>
<button class="button">See more</button>
</div>
<div class="box">
<img src="Reproduction.jpg" alt="">
<h3>Maturatiion</h3>
<p>Its the emergence of unfolding of an individual genetic potential as they become older
</p>
<button class="button">See more</button>
</div>
</div>
<br><br>
<h3>™ ©+254700809861 for more inquiries</h3>
</body>
</html>
Output:
With the above HTML syntax, our structure is set. The next step is to introduce the powerful CSS to make our images responsive.
Application and Implementation of different designs and styles on Cards.
Discussing the Asterisk ( *), Margins, Border, Padding, and other CSS styles
The Asterisk (*):➜ is the CSS universal selector that selects all elements in the HTML document
Margin:➜ Used to create extra space around an element.
Border:➜ Used to set an element’s border.
Padding:➜ Used to create space between the content of an element and its border, the default state is 2px.
CSS Hover, Transform, Transition, and some Animations and how to apply them
* {
margin: 0;
padding: 0;
text-align: center;
font-family: arial;
}
<!--Adding color on background-->
body{
background-color: #146f6f;
padding-top: 50px ;
padding-bottom: 100px;
}
<!--Adding color on the headings-->
h2{
color: #0c0115;
}
h3 { color: #0c0115;
font-size: 30px;
margin-top: 10px;
}
.container{
padding-top:50px;
gap: 25px ;
margin: auto;
display:flex;
justify-content: center;
}
<!--Adding responsiveness to the images-->
.box{width: 320px;
height: 500px;
background-color: #3ea9a9;
border-radius: 100px;
transition:transform 0.6s ease;
}
<!--Adding hover-->
.box:hover{
transform: translateY(30px);
}
.box img{
width: 250px;
height: 250px;
padding-top: 30px;
border-radius: 30%;
}
.box p {
color: #1a082a;
padding-top: 10px;
padding-bottom: 10px;
line-height: 25px;
font-family: Georgia;
font-weight: 5px;
}
.box button{
width: 150px;
height: 40px;
background-color: #1c092e;
border-radius: 10px;
border: none;
color: #b788e2;
font-size: 17px;
font-weight: bold;
margin-top: 2px;}
.box button:hover{
background-color: #1232ea;
color: whitesmoke;
border: 2px solid salmon;
}
Output:
Importance of Cards in Web Development
A card’s importance can not be downplayed as it is crucial in providing a user-friendly representation of information. A card provides a summary of what the developer intends to represent in a visually appealing way, notice that in our mini project above, we were able to add pictures, put some text, and define what the pictures are about, they look good, right? 90% of online websites have an aspect of card and developers should embrace this exciting skill. While this article has only touched base, developers are encouraged to keep on learning different CSS card designs.
Conclusion
In summary, our mini project above has helped us create a web page that has some animation, user user-friendly, and easy to read. Design cards are essential in displaying content in an effective and organized manner making a website user-friendly and visually appealing as we can see.
This knowledge can be applied in the making of different types of websites including; Portfolio websites, E-commerce websites, Personal Websites, Business websites, etc. Thanks to the internet, I can voice my valid opinions and help other developers learn and grow in Tech.
Top comments (0)