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.
- How to hide “Image not found” icon when source image is not found?
- How to Create an Image Overlay Icon using HTML and CSS ?
- How to replace dropdown-toggle icon with another default icon in Bootstrap ?
- Display div element on hovering over <a> tag using CSS
- CSS | translate() Function
- p5.js | translate() function
- PHP | ImagickDraw translate() Function
- HTML5 | translate Attribute
- HTML | canvas translate() Method
- How To Add Google Translate Button On Your Webpage?
- How to zoom in on a point using scale and translate ?
- Semantic-UI | Icon
- How to use mat-icon in angular?
- Bulma | Icon
- How to count number of notification on an icon?
- How to add icon logo in title bar using HTML ?
- Reduce the size of an icon during the animation
- How to use font awesome icon as a cursor ?
- How to put the text inside of a created icon?
- CSS to put icon inside an input element in a form
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.