Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 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=
         
</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>

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=
         
        <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>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :