How to create swinging Image Hanger using HTML and CSS ? Last Updated : 24 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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 page's structure is defined.We will first create an HTML file.We will then 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 to display our image. index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main_box"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png"> </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); } } Output: Comment More infoAdvertise with us Next Article How to create swinging Image Hanger using HTML and CSS ? R rahulmahajann Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to Create Image Lightbox Gallery using HTML CSS and JavaScript ? A lightbox gallery is basically used to view the gallery images in detail specifically. You can code the JavaScript to do so but also we can use some downloaded JS and CSS. In this article, we will download the lightbox and attach the JS and CSS files into our code. For our own design satisfaction, 3 min read How to create Image Folding Effect using HTML and CSS? In this article, we are going to create an image folding effect below the main image. This is a simple project, we can achieve our target only by using HTML and CSS. Approach: Create the main div in which we are creating 4 list tags.Use of nth-child() selector property to give different styles to di 2 min read How to Create Image Overlay Hover using HTML & CSS ? In this article, we will go over 5 different types of overlays: left, right, top, bottom, and fade. You are going to need two divs. One will be your overlay div, containing what will show up once the user hovers over the image, and the other will be a container that holds both the image and its over 6 min read How to Create Image Accordion using HTML and CSS ? In this article, we will see how to create an image accordion using HTML & CSS that is basically used for advertising purposes on e-commerce websites. An Accordion is often used to open multiple sections at full width & also content pushes the page content downward.Approach:Create an HTML fi 2 min read How to create Image Stack Illusion using HTML and CSS ? In this article, we are going to create an illusion of images below the main image. It is the same as the image set of the gallery in an older version of Android. This is a simple project, we can achieve our target only by using HTML AND CSS.Overview of the project:Approach:Create a main div in whic 3 min read How to Create Image Hovered Detail using HTML & CSS? In this article, we will learn how to create a type of hover effect over an image to get its complete detail. This is can be achieved by using simple HTML & CSS.Overview Of Our Project:Approach:We will first create an HTML file in which we are going to add an image for our image hanger.We will t 3 min read How to Create Animated Loader Ring using HTML and CSS? An Animated Loader Ring using HTML and CSS is a circular loading animation that visually indicates progress or loading status. It is created with a simple HTML structure and animated using CSS properties like border, transform, and @keyframes for rotation effects.ApproachHTML Structure: The code use 2 min read How to Create Neon Light Button using HTML and CSS? The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc 2 min read Create Indian Flag using HTML and CSS In this article, we will design an animated flag of India using HTML and CSS. As we know that our Indian flag has three colors saffron, white and green and there is also a wheel at the center of the white part. So let's build the Indian flag. Here we will also create a stick of the flag. So first cr 6 min read How to create Horizontal Scroll Snap Using HTML and CSS ? In this project, we are going to create a simple Horizontal Scroll Snap by using HTML and CSS only.Glimpse of Project Approach: The best way to animate the HTML objects is by using CSS classes and by setting the transitions at different stages.HTML code:Create an HTML file (index.html).Link the CSS 2 min read Like