In this article, we will learn how to create a type of Image Hanger that undergoes a swinging motion using HTML and CSS. This can be used to add interactivity to the page or highlight an image to draw attention.
Approach:
- We will first create an HTML file in which we are going to add an image for our image hanger.
- We will then create a CSS style to give animation effects to the element containing the image.
We will start by defining the HTML and CSS sections of the page as given below.
HTML Section: In this section, the structure of the page is defined.
- We will first create an HTML file.
- We are then going to write out the boilerplate code required for an HTML page.
- We will next link the CSS file or directly add the required CSS that provides all the animation effects.
- In the body section, we will add an image source so that we can display our image.
index.html
<html>
<head>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<div class="main_box">
<img src=
>
</div>
</body>
</html>
|
CSS Section: In this section, we will define the CSS of the page. Using CSS we will give different types of animations and effects to our HTML page so that it looks interactive to all users.
- We will first reset all the browser effects so that everything is consistent on all browsers.
- Then we will define the styling to be given to the elements which include the size and position.
- We will use @keyframe and pseudo-class to add animation effects to the specific classes.
Code:
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* In this part, we will define the characteristics
of the body of the page and align the content */
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
/* In this part, we will position and set the image
in the page */
.main_box {
margin-top: 15em;
margin-left: 15em;
width: 22em;
position: relative;
transform: center -5em;
/* We will the animation defined below to
this element */
animation: move infinite 0.5s alternate ease-in-out;
}
.main_box::before {
content: "";
width: 0.75em;
height: 0.75em;
position: absolute;
left: 50%;
top: -20%;
transform: translateX(-50%);
border: 0.125em solid rgb(6, 108, 9);
border-radius: 50%;
background-color: #ff7a00;
}
.main_box::after {
content: "";
position: absolute;
width: 0.5em;
height: 5em;
border-radius: 0.75em;
left: 50%;
top: -20%;
transform: translateX(-50%);
border: 0.125em solid rgb(6, 108, 9);
position: fixed;
/* The z-index of -2 is set to keep the object of
::after pseudo-class to beneath the other objects
*/
z-index: -2;
}
/* @keyframes is used to add the swinging
animation to our code! */
@keyframes move {
from {
transform: rotate(-6deg);
}
to {
transform: rotate(6deg);
}
}
</style> |
Output:
Article Tags :
Recommended Articles