Image Stack Animation Using HTML and CSS
Step 1:
This code creates a container <div> element with the ID “image-wrapper” to group multiple images together. Inside the container, there are three <a> elements, each containing an <img> element. These <img> elements display images sourced from different URLs. The “alt” attribute within the <img> tags is empty, which is invalid HTML, but typically it would contain alternative text describing the image for accessibility purposes. The <a> elements are wrapped around the <img> tags, but since the “#” symbol is used as the href value, clicking on the images won’t lead to any specific webpage. This code snippet essentially creates a simple image gallery.
HTML Markup: Start by creating the HTML structure for your image stack animation. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="image-wrapper">
<a href="#"><img decoding="async" src="https://codewarrier.com/wp-content/uploads/2024/03/LimeWire-AI-Studio-Asset.jpg" alt /></a>
<a href="#"><img decoding="async" src="https://codewarrier.com/wp-content/uploads/2024/03/LimeWire-AI-Studio-Asset-1.jpg" alt /></a>
<a href="#"><img decoding="async" src="https://codewarrier.com/wp-content/uploads/2024/03/LimeWire-AI-Studio-Asset-2.jpg" alt /></a>
</div>
</body>
</html>
Step 2:
This CSS code defines styles for various elements within a webpage. Here’s a breakdown of what each part does:
* { margin:0; padding:0; }: This sets the margin and padding of all elements to zero, removing any default spacing.body { background:#346; font-family:Arial, sans-serif; color:#f0f0f0; }: This styles the body of the webpage, setting the background color to a shade of green, using Arial or a sans-serif font, and setting the text color to light grey.h1 { margin-top:3%; font-size:320%; text-align:center; }: This styles the heading level 1 (h1) elements, setting a margin at the top, a large font size, and centering the text.h1 div { font-size:60%; font-weight:700; text-align:center; line-height:24px; color:#c0c0c0; }: This styles the div elements within h1 elements, adjusting the font size, weight, alignment, line height, and color.#image-wrapper { width:300px; margin:0 auto; margin-top:2%; }: This styles a container with the ID “image-wrapper”, setting its width to 300 pixels, centering it horizontally, and adding some margin at the top.#image-wrapper a { ... }: This styles the anchor (link) elements within the “image-wrapper” container, defining their appearance, size, position, border, shadow, and transition effects.#image-wrapper img { ... }: This styles the image elements within the “image-wrapper” container, setting their width to 500 pixels and ensuring they don’t exceed the height of their container.#image-wrapper a:first-of-type { ... }: This targets the first anchor element within “image-wrapper” and applies specific styling, including positioning and rotation.#image-wrapper:hover a:first-of-type { ... }: This adjusts the styling of the first anchor element within “image-wrapper” when the mouse hovers over the container, creating an animation effect.Similar rules apply to the second and last anchor elements within “image-wrapper”, each with their unique styling and hover effects.
Overall, this CSS code creates a visually appealing layout for an image gallery with some dynamic hover effects.
CSS Styling:
*{
margin:0;padding:0;
}
body{
background:#346;
font-family:Arial,sans-serif;
color:#f0f0f0;
}
h1{
margin-top:3%;
font-size:320%;
text-align:center;
}
h1 div{
font-size:60%;
font-weight:700;
text-align:center;
line-height:24px;
color:#c0c0c0;
}
#image-wrapper{
width:300px;
margin:0 auto;
margin-top:2%;
}
#image-wrapper a{
width:500px;
height:500px;
position:absolute;
display:block;
border:6px solid #f0f0f0;
border-radius:2px;
box-shadow:0 0 10px rgba(0,0,0,.3);
transition:margin .5s;
-webkit-transition:margin .5s;
}
#image-wrapper img{
width:500px;
max-height:100%;
}
#image-wrapper a:first-of-type{
margin-top:-5px;
margin-left:-20px;
z-index:2;
transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
}
#image-wrapper a:nth-of-type(2){
margin-top:-5px;
margin-left:-10px;
z-index:1;
}
#image-wrapper a:last-of-type{
transform:rotate(3deg);
-webkit-transform:rotate(3deg);
}
#image-wrapper:hover a:first-of-type{
margin-left:-310px;
margin-top:5px;
}
#image-wrapper:hover a:nth-of-type(2){
margin-top:-5px;
}
#image-wrapper:hover a:last-of-type{
margin-left:290px;
margin-top:5px;
}
#image-wrapper a:first-of-type:hover,#image-wrapper a:last-of-type:hover{
margin-top:-5px;
}
#image-wrapper a:nth-of-type(2):hover{
margin-top:-10px;
}
