Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Syntax
selector {
transform: translateX(value) | translateY(value) | translate(x, y);
transition: transform duration timing-function;
}
selector:hover {
transform: translateX(value) | translateY(value) | translate(x, y);
}
Method 1: Using CSS Transitions
The first method to translate an image or icon on hover is by using CSS transitions. The CSS transitions property is used to change property values smoothly over a given duration. With transitions, you can specify the duration and timing function of an animation.
Example
In the below example, we have used an image tag with a class of "translate-image". In the CSS section, we have set the transition property to "transform" with a duration of 0.7 seconds. When we hover on the element, we set the transform property to translate 30 pixels to the right ?
<!DOCTYPE html>
<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;
color: green;
font-size: 50px;
}
#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>
<img src="/static/images/logo.png" class="translate-image">
<br><br>
<i class="fa fa-html5" id="icon"></i>
</body>
</html>
The TutorialsPoint logo image smoothly slides 30px to the right when hovered, and the HTML5 icon slides 20px to the right with a green color and large size.
Method 2: Using CSS Animations
The second method to translate an image or icon on hover is by using CSS animations. CSS animations allow you to animate elements without using JavaScript or Flash. Using animations lets us create more complex and dynamic effects than transitions with keyframes.
Example
In the below example, we have used keyframes to define animation steps. We set the animation property with a duration and easing function. On hover, we trigger a different animation that creates additional movement ?
<!DOCTYPE html>
<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;
color: green;
font-size: 50px;
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 image or icon to see the effect</p>
<img src="https://picsum.photos/100/100" class="image">
<br><br>
<i class="fa fa-html5" id="icon"></i>
</body>
</html>
The image starts with a 10px translation to the right, and on hover moves an additional 10px (total 20px). The HTML5 icon behaves similarly with smooth animation transitions.
Method 3: Using CSS Transform
The third method uses the CSS transform property directly with hover pseudo-class. This is the most straightforward approach for simple translations without complex timing controls.
Example
In the below example, we apply transform property directly on hover without using transitions or animations for instant movement ?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.instant-image:hover {
transform: translateY(-10px) translateX(15px);
}
#instant-icon {
color: blue;
font-size: 50px;
}
#instant-icon:hover {
transform: translate(25px, -15px);
}
</style>
</head>
<body>
<h2>Instant Transform on Hover</h2>
<p>Hover over the image or icon for instant translation</p>
<img src="/static/images/logo.png" class="instant-image">
<br><br>
<i class="fa fa-css3" id="instant-icon"></i>
</body>
</html>
The image instantly moves up 10px and right 15px when hovered. The CSS3 icon instantly moves 25px right and 15px up with blue color.
Conclusion
Adding interactivity to websites enhances user experience, and translating images or icons on hover is an effective technique. You can achieve this using CSS transitions for smooth animations, CSS animations for complex effects, or direct transforms for instant movement. Choose the method that best fits your design needs.
2K+ Views
