How to translate an image or icon by hovering over it? - GeeksforGeeks

19 May, 2020
Image translation can be an effective way to add a responsive edge to your website. This article will have two sections, the first section will contain the structure for adding the image/icon to the web-page and the second section will contain designing the structure using CSS.
Also, to give an idea regarding what this article is about, as soon as the mouse pointer is moved/hovered over the image/icons, the image/icons are translated i.e move/shift from their original position and move/shift upwards giving it a more responsive effect. The translation is nothing but shifting of an object from its original position to a new position.
Creating the structure:In this section, we will create a basic structure with the help of HTML and also attach the link of the icon which will be used to show the translation effect on hover.
HTML code:
<!DOCTYPE html><html>  <head>          <title>How to translate an image     or icon by hovering over it</title>    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">         </head><body>  <section id="social-media">    <div class="container text-center">        <p> THIS ICON/IMAGE WILL MOVE ON HOVER </p>        <div class="social-icons">                        <a href="https://www.geegsforgeeks.com">                        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"                          alt="Geeksforgeeks">                         </a>                                                 </div>    </div></section>  </body></html>
Designing the structure:In the previous section, we created the basic structure of the web-page. In this section, we will design the structure we created above with the help of CSS.
CSS code:
        <style>                   /* section styling */             #social-media              {                  padding: 100px 0;              }               /* styling the paragraph tag in the section */              #social-media p              {                 font-size: 36px;                 font-size: 600;                 color: #E7113E;                 margin-bottom: 30px;              }/* image styling - adjusting the width and height of any given image*/                .social-icons img              {                 width: 40px;                 height: 40px;                 transition: 0.5s              }              /* adding the hovering effect */             .social-icons a:hover img             {                transform: translateY(-10px);             }                  </style>
Final Solution:This is the final code after combining the 2 sections above. It will display how the image/icon will translate on moving the mouse pointer over it or by hovering over it.
<!DOCTYPE html><html>  <head>          <title>How to translate an image     or icon by hovering over it</title>    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">                 <style>                   /* section styling */             #social-media              {                  padding: 100px 0;              }               /* styling the paragraph tag in the section */              #social-media p              {                 font-size: 36px;                 font-size: 600;                 color: #E7113E;                 margin-bottom: 30px;              }  /* image styling - adjusting the width and height of any given image*/                .social-icons img              {                 width: 40px;                 height: 40px;                 transition: 0.5s              }              /* adding the hovering effect */             .social-icons a:hover img             {                transform: translateY(-10px);             }                  </style>      </head><body>  <section id="social-media">    <div class="container text-center">        <p> THIS ICON/IMAGE WILL MOVE ON HOVER </p>        <div class="social-icons">                        <a href="https://www.geegsforgeeks.com">                        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"                         alt="Geeksforgeeks">                         </a>                                                 </div>    </div></section>  </body></html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)