如何通过将鼠标悬停在图像或图标上来翻译它？

图像翻译可以是为您的网站添加响应式边缘的有效方法。本文将分为两部分，第一部分将包含将图像/图标添加到网页的结构，第二部分将包含使用 CSS 设计结构。

此外，为了了解本文的内容，只要将鼠标指针移动/悬停在图像/图标上，图像/图标就会被平移，即从其原始位置移动/移动并向上移动/移动给出它更灵敏的效果。平移只不过是将对象从其原始位置移动到新位置。

创建结构：
在本节中，我们将在 HTML 的帮助下创建一个基本结构，并附上图标的链接，该链接将用于显示悬停时的翻译效果。

HTML代码：

  

      
    
    
         


  

    

        
 THIS ICON/IMAGE WILL MOVE ON HOVER 
        

                        
                         
                                                                 
        
    

  

设计结构：
在上一节中，我们创建了网页的基本结构。在本节中，我们将在 CSS 的帮助下设计我们上面创建的结构。

CSS代码：

最终解决方案：
这是结合上述 2 部分后的最终代码。它将显示图像/图标在将鼠标指针移动到其上或悬停在其上时将如何转换。

  

      
    
    
         
        
  
  
  


  

    

        
 THIS ICON/IMAGE WILL MOVE ON HOVER 
        

                        
                         
                                                                 
        
    

  

输出：