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

📅  最后修改于: 2021-09-01 01:59:19             🧑  作者: Mango

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

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

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

HTML代码:



  

      
    How to translate an image
     or icon by hovering over it
    
         


  
    
        

THIS ICON/IMAGE WILL MOVE ON HOVER

             
  

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

CSS代码:


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



  

      
    How to translate an image 
    or icon by hovering over it
    
         
        
  
  
  


  
    
        

THIS ICON/IMAGE WILL MOVE ON HOVER

             
  

输出: