Card Image Album Design

Published by StudyMuch on September 4, 2024September 4, 2024

Card Image Album Design
Hello Coders, in this post we will learn and practice how to design Card Image Album with best and attractive design with HTML and CSS, we also provide the source code of Card Image Album Design for your practice.
 
HTML Structure
Here is a brief overview of the HTML code for the structure of a card image album, see the code and description of the code below for better understanding.

<div class="container">
    <div><img src="aria.jpg" alt="">
    <span class="sm">💗</span></div>
    <div><img src="aria1.jpg" alt="">
    <span class="sm">💗</span></div>
    <div><img src="aria2.jpg" alt="">
    <span class="sm">💗</span></div>
    <div><img src="aria4.jpg" alt="">
    <span class="sm">💗</span></div>
    <div><img src="propose.jpg" alt="">
    <span class="sm">StudyMuch</span></div>
</div>

Breakdown of HTML Code:
Container Div (<div class=”container”>):

• The outermost div with the class container serves as a wrapper for the individual cards or image elements. It provides a structural layout for the inner elements.

Inner Divs (<div>):

• Each div inside the container holds an image (<img>) and a span element (<span>).
• These divs are positioned inside the container and will be styled according to any associated CSS (not provided in this snippet).

Image Elements (<img src=”aria.jpg” alt=””>):

• Each inner div contains an <img> tag that displays an image. The src attribute specifies the path to the image file, and the alt attribute provides alternative text for the image if it cannot be displayed.
• Examples of image sources used are “aria.jpg”, “aria1.jpg”, “aria2.jpg”, “aria4.jpg”, and “propose.jpg”.

Span Elements (<span class=”sm”>):

• The span elements contain either a heart emoji (💗) or the text “StudyMuch”.
• The class=”sm” applied to the span allows for targeted styling through CSS.
• The heart emoji and “StudyMuch” text are likely meant to overlay or accompany the images, adding a visual or textual element to the card.

 
CSS Code Structure
Here the CSS Code Structure for design the Card Image Album, with CSS you can design any HTML Structure.

body{
    background-color:rgb(38, 0, 41);
}
.container div {
    position: absolute;
    height: 250px;
    width: 160px;
    background-color:rgb(255, 255, 255);
    border: 5px solid white;
    padding-bottom: 40px;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 8%;
    box-shadow: #750099 -2px 2px 4px;
    transform-origin: bottom left;
    scale: 1;
    transition: all 200ms ease;
    overflow: hidden;
}
.container div img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    filter: blur(3px);
    transition: transform 200ms ease;
}
.sm {
    position: absolute;
    bottom: 10px; 
    left: 50%;
    transform: translateX(-50%); 
    color: black;
    font-size: 15px;
    font-family: monospace;
    font-weight: bolder;
}
.container div:hover {
    scale: 1.1;
    z-index: 10;
}
.container div:hover img {
    cursor: pointer;
    filter: blur(0px);
}
.container:hover div:nth-child(1) {
    transform: rotate(-40deg) 
    translate(0px, -8px);
}
.container:hover div:nth-child(2) {
    transform: rotate(-30deg) 
    translate(0px, -8px);
}
.container:hover div:nth-child(3) {
    transform: rotate(-14deg) 
    translate(0px, -8px);
}
.container:hover div:nth-child(4) {
    transform: rotate(-2deg) 
    translate(0px, -8px);
}
.container:hover div:nth-child(5) {
    transform: rotate(10deg) 
    translate(0px, -8px);
}

CSS Code Breakdown:

• The body tag has a background color set to a dark purple shade (rgb(38, 0, 41)).
• Each div inside the .container class is styled to be absolutely positioned with a specific height (250px) and width (160px).
• The background color is white, with a white border and a slightly rounded corner (border-radius: 8%).
• The box-shadow adds a shadow effect in a purple color (#750099), giving the div a lifted appearance.
• Images within the divs are made to fully fill the div (width: 100%; height: 100%) with slightly rounded corners.
• A blur effect (filter: blur(3px)) is applied to the images by default, which is removed when hovered over.
• The .sm class positions text near the bottom center of the div and applies a black color, bold font, and a slight increase in size.
• When hovering over a div, it scales up slightly (scale: 1.1) and brings the div to the front (z-index: 10).
• The image blur effect is removed on hover, making the image clear.

This CSS sets up a dynamic and interactive layout with smooth transitions and visual effects when users hover over the images.
 
Conclusion:
So, here you have learned how to create attractive card image album design using only HTML and CSS structure, I hope you have understood better or learned something amazing, you can copy these codes for practice on your project, and if you have any doubts then don’t hesitate to ask in the comment section.
 
Learn More:

• Create Photo Editor tools using HTML, CSS and JS.
• Proposal Card Design with HTML and CSS.
• Design Birthday Wishes Template and Card.