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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
      
    <title>How to translate an image
     or icon by hovering over it</title>
    <link rel="stylesheet" href=
         
</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=
                          alt="Geeksforgeeks"
                        </a>                                         
        </div>
    </div>
</section>
  
</body>
</html>

chevron_right


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:



filter_none

edit
close

play_arrow

link
brightness_4
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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
      
    <title>How to translate an image 
    or icon by hovering over it</title>
    <link rel="stylesheet" href=
         
        <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=
                         alt="Geeksforgeeks"
                        </a>                                         
        </div>
    </div>
</section>
  
</body>
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.