- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to translate an image or icon by hovering over it?
In web development, interactivity is key to providing a memorable user experience. One common technique used to add interactivity is hovering over images or icons to reveal more information or change the appearance. Translating an image or icon by hovering over it is a great way to add some movement and interest to your website.
In this article, we will learn how to translate an image or icon on hover. To perform this task, we will learn different approaches using only HTML and CSS.
Different Methods to Translate an Image or Icon on Hover
Method 1: CSS Transitions
The first method to translate an image or icon on hover is by using the CSS transitions. The CSS transitions is used to change property values smoothly, over a given duration like on hovering over an element, etc. With transitions, you can specify the duration and timing function of an animation.
Syntax
Below is the syntax used to transform an image or icon using the CSS transitions.
<img src="your-image.jpg" class="trans-image">
<style>
.trans-image {
transition: transform 0.3s ease-in-out;
}
.trans-image:hover {
transform: translateX(20px);
}
</style>
Example
In the below example, we have used an image tag with a class of "trans-image". In the CSS section, we have set the transition property to "transform" with a duration of 0.3 seconds and an easing function of "ease-in-out". Here when we hover on the element, we set the transform property to translate 30 pixels to the right in case of an image and 20px in case of an icon.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.translate-image {
transition: transform 0.7s ease-in-out;
}
.translate-image:hover {
transform: translateX(30px);
}
#icon {
transition: transform 0.7s ease-in-out;
}
#icon:hover {
transform: translateX(20px);
}
</style>
</head>
<body>
<h2>Translating image and icon using CSS Transitions</h2>
<p> Hover over the below image or icon to see the transition </p>
<!-- Translating image on hover using CSS transitions -->
<img src="https://www.tutorialspoint.com/static/images/logo.png?v2" class="translate-image">
<br>
<!-- Translating icon on hover using CSS transitions -->
<i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
</body>
</html>
Method 2: CSS Animations
The first method to translate an image or icon on hover is by using the CSS animations. The CSS allows of HTML is used to animate the elements without using JavaScript or Flash. Here we can change as many CSS properties we want, as many times as you want.
To use CSS animation, we must first specify some keyframes for the animation. The Keyframes hold what styles the element will have at certain times. Using the animations let’s us create more complex and dynamic effects than transitions.
Syntax
Below is the syntax used to transform an image or icon using the CSS animations.
<i class="your-icon"></i>
<style>
.your-icon {
display: inline-block;
width: 50px;
height: 50px;
background-color: #ccc;
animation: translate 0.3s ease-in-out;
}
.your-icon:hover {
animation-name: translate-hover;
}
@keyframes translate {
from {
transform: translateX(0);
}
to {
transform: translateX(10px);
}
}
@keyframes translate-hover {
from {
transform: translateX(10px);
}
to {
transform: translateX(20px);
}
}
</style>
Example
In the below example, we have used an "i" tag with a class of "icon" and an <img> tag having a class “image”. Here, we have set the display property to "inline-block". We also set the animation property to "translate" with a duration of 0.3 seconds and an easing function of "ease-in-out". Now when we hover, the animation name to "translate-hover" is added using keyframes to translate the icon and image 10 pixels to the right, and then 20 pixels to the right on subsequent hovers.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.image {
display: inline-block;
width: 100px;
height: 100px;
animation: translate 0.3s ease-in-out;
}
.image:hover {animation-name: translate-hover;}
#icon {
display: inline-block;
width: 100px;
height: 100px;
animation: translate 0.3s ease-in-out;
}
#icon:hover {animation-name: translate-hover;}
@keyframes translate {
from {transform: translateX(0);}
to {transform: translateX(10px);}
}
@keyframes translate-hover {
from {transform: translateX(10px);}
to {transform: translateX(20px);}
}
</style>
</head>
<body>
<h2>Translating image and icon using CSS Animations</h2>
<p> Hover over the imgae orr icon to see the effect</p>
<!-- Translating image on hover using CSS Animations -->
<img src="https://fastly.picsum.photos/id/213/200/300.jpg?hmac=t-54teMEgFL3q9WPaRq2t7YdGCU9aIRw77OCaHlSVRs" class="image"> <br>
<!-- Translating icon on hover using CSS Animations -->
<i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
</body>
</html>
Method 3: CSS Grid
The first method to translate an image or icon on hover is by using the CSS grid. The CSS Grid uses a grid-based layout system having its rows and columns that makes it easier to design web pages without having to use floats and positioning. Here we specify the grid item position using the grid-row and grid-column properties and then apply a CSS transform property to the grid item you want to translate, such as rotate or translate.
Syntax
Below is the syntax used to transform an image or icon using the CSS grid.
<div class="grid-container">
<img src="your-image.jpg" class="trans-image">
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}
.trans-image {
grid-row: 2 / 3;
grid-column: 2 / 3;
transition: transform 0.3s ease-in-out;
}
.trans-image:hover {
grid-column: 3 / 4;
transform: translateX(10px);
}
</style>
Example
In the below example, we have defined a "div" tag with a class of "container". Here, in CSS we have set the display property to "grid", and define the grid template with three columns and three rows, each with a fraction unit of 1. To transform the image and icon, we have used the transition property to "transform" with a duration of 0.3 seconds and an easing function of "ease-in-out” which when hovered translate the image or icon 10 pixels to the right.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.image {
grid-row: 2 / 3;
grid-column: 2 / 3;
transition: transform 0.3s ease-in-out;
}
.image:hover {
grid-column: 3 / 4;
transform: translateX(10px);
}
#icon {
grid-row: 2 / 3;
grid-column: 2 / 3;
transition: transform 0.3s ease-in-out;
}
#icon:hover {
grid-column: 3 / 4;
transform: translateX(10px);
}
</style>
</head>
<body>
<div>
<h2>Translating image and icon using CSS Grid</h2>
<p> Hover over the image or icon to see the effect </p>
<!-- Translating image on hover using CSS Grid -->
<img src="https://www.tutorialspoint.com/static/images/logo.png?v2" class="image">
<br>
<!-- Translating icon on hover using CSS Grid -->
<i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
</div>
</body>
</html>
Conclusion
Adding interactivity to our website can enhance the user experience, and one way to achieve this is by translating images or icons on hover. This effect can be achieved using HTML and CSS, and there are different methods to do so, such as using CSS transitions or animations or grid. All these methods allow us to specify the duration and timing function of the animation and create dynamic effects. Using these techniques, we can create a more engaging website that will leave a lasting impression on your visitors.
597 Views
