Animated Album Using HTML and CSS
Creating an Animated Album Using HTML and CSS
Welcome to another tutorial by “StudyMuch“! Today, we’ll be exploring how to create a Stylish Animated Album using HTML and CSS. This is not only a functional design but also an eye-catching way to present your images. Let’s dive into the code and understand how it works.
The HTML Structure
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Album by "StudyMuch"</title> <style> /* CSS Code Goes Here */ </style> </head> <body> <div class="container"> <!-- Album Items Go Here --> </div> </body> </html>
We begin with the standard HTML5 document structure. The <head>
section includes meta tags for character set and viewport settings, and a title for the webpage. The <body>
section contains a <div>
with the class “container” where our album items will reside.
The HTML Album Items
Within the ‘.container div’, we have multiple album items, each represented by a .album div. Each item includes a data-text attribute for the text overlay and an image.
<div data-text="StudyMuch" style="--r:-15;" class="album"> <img viewbox="0 0 496 512" src="ig1.jpg" alt=""> </div> <div data-text="StudyMuch" style="--r:5;" class="album"> <img viewbox="0 0 640 512" src="ig2.jpg" alt=""> </div> <div data-text="StudyMuch" style="--r:25;" class="album"> <img viewbox="0 0 576 512" src="ig3.jpg" alt=""> </div>
Each ‘.album div’ includes a data-text attribute for the text overlay, a custom style (–r) for individual rotation, and an image with a source attribute pointing to the respective image file.
The CSS Styling
Now, let’s explore the CSS Code that brings our album to life.
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: black;} .container { position: relative; display: flex; justify-content: center; align-items: center;} .container .album { position: relative; width: 180px; height: 200px; background: linear-gradient(#fff2, transparent); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25); display: flex; justify-content: center; align-items: center; transition: 0.5s; border-radius: 10px; margin: 0 -45px; transform: rotate(calc(var(--r) * 1deg)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .container:hover .album { transform: rotate(0deg); margin: 0 10px; cursor: pointer; } .container .album::before { content: attr(data-text); position: absolute; bottom: 0; width: 100%; height: 40px; background: rgba(255, 255, 255, 0.05); display: flex; justify-content: center; align-items: center; color: #fff; } .container .album img { font-size: 2.5em; fill: #fff;} img { width: 180px; height: 170px; margin-bottom: 30px; object-fit: cover; border-radius: 10px; } .album:hover { border: 5px dotted yellow; }
Explanation:
- The ‘body’ styling centers our album on the page and provides a dark background for contrast.
- The ‘.container’ class centers its contents and serves as a wrapper for the album items.
- The ‘.container .glass’ class styles the individual album items. It includes a rotating animation, a text overlay, and a translucent background using CSS gradients and filters.
- The ‘@keyframes rotates’ define the rotation animation for the album items.
- ‘.container:hover .glass’ modifies the appearance of the album items on hover, creating a smooth transition.
- ‘.container .glass::before’ creates a text overlay with a subtle background for each album item.
- ‘.container .glass img’ styles the album images, giving them a circular appearance.
- The ‘img’ selector provides additional styling for the images, including dimensions, border radius, and object-fit properties.
- Finally, ‘.glass:hover’ adds a dotted yellow border to the album items when hovered.
Conclusion;
And there you have it! With this simple HTML and CSS code, you can create an attractive animated album for your website or project. Feel free to customize the styles, images, and animations to suit your preferences. I hope you enjoyed this tutorial (Animated Album Using HTML and CSS), Happy Coding!
Learn More;
0 Comments