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.
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.
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.