In web development, interactivity is key to delivering a memorable user experience. A common technique is to hover over an image or icon to reveal more information or change the appearance. Translating by hovering over an image or icon 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 accomplish this task, we will learn different methods using only HTML and CSS.
The first way to translate an image or icon on hover is achieved by using CSS transitions. CSS transitions are used to smoothly change property values, such as when hovering over an element, etc. Using transitions, you can specify the duration and time function of your animation.
The following is the syntax for using CSS transitions to transform an image or icon.
<img src="your-image.jpg" class="trans-image" alt="How can I translate an image or icon by hovering over it?" >
<style>
.trans-image {
transition: transform 0.3s ease-in-out;
}
.trans-image:hover {
transform: translateX(20px);
}
</style>
In the example below, we use an image tag with a class name of "trans-image". In the CSS section, we set the transition property to "transform", a duration of 0.3 seconds, and use the "ease-in-out" easing function. When we hover over an element, we set the transform property to translate 30 pixels to the right if it's an image, or 20 pixels to the right if it's 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" alt="How can I translate an image or icon by hovering over it?" >
<br>
<!-- Translating icon on hover using CSS transitions -->
<i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
</body>
</html>
The first way to translate an image or icon on hover is to use CSS animations. CSS allows elements to be animated using HTML without the need for JavaScript or Flash. Here we can change as many CSS properties as we want, as many times as we want.
To use CSS animation, we first have to specify some keyframes for the animation. Keyframes determine the style of an element at certain points in time. Using animations allows us to create more complex and dynamic effects than transitions.
The following is the syntax for using CSS animation to transform an image or icon.
<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>
In the following example, we use an "i" tag with class "icon" and an tag with class "image". Here, we set the display attribute to "inline-block". We also set the animation property to "translate", the duration to 0.3 seconds, and the easing function to "ease-in-out". Now when we hover, by using keyframes and setting the animation name to "translate-hover", we move 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" alt="How can I translate an image or icon by hovering over it?" > <br>
<!-- Translating icon on hover using CSS Animations -->
<i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
</body>
</html>
The first way to make an image or icon translate on hover is by using CSS Grid. CSS Grid uses a grid-based layout system with rows and columns, making it easier to design web pages without having to use floats and positioning. Here, we specify the position of the grid item using the grid-row and grid-column properties, and then apply CSS transform properties, such as rotation or translation, to the grid item to be translated.
The following is the syntax for using CSS Grid to transform an image or icon.
<div class="grid-container">
<img src="your-image.jpg" class="trans-image" alt="How can I translate an image or icon by hovering over it?" >
</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>
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" alt="How can I translate an image or icon by hovering over it?" >
<br>
<!-- Translating icon on hover using CSS Grid -->
<i class="fa fa-html5" id="icon" style="color: green; font-size: 50px;" />
</div>
</body>
</html>
Adding interactivity to our website can enhance the user experience, and one way to achieve this is to translate an image or icon on hover. This effect can be achieved using HTML and CSS, there are different ways to achieve it, such as using CSS transitions or animations or grids. All these methods allow us to specify the duration and time function of the animation and create dynamic effects. Using these techniques, we can create a more attractive website that will impress your visitors.
The above is the detailed content of How can I translate an image or icon by hovering over it?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
