Issue
How can I make smooth animation when I hover my icon, transition from left to right. I try with transition but that didn't work. Sorry for my bad english.
.menu-icon {
height: auto;
background-color: tomato;
padding: 10px;
fill: white;
border-radius: 100px;
}
.menu-icon:hover::after {
content: 'Početna';
font-size: 0.7em;
vertical-align: middle;
transition: 300ms;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<i class="fas fa-home fa-2x menu-icon"></i>
</body>
</html>Solution
Please check the updated HTML and CSS below:
.menu-icon {
height: auto;
background-color: tomato;
padding: 10px;
fill: white;
border-radius: 100px;
}
span {
display: inline-block;
vertical-align: middle;
width: 0;
overflow: hidden;
white-space: nowrap;
transition: width 300ms linear;
}
i:hover span {
width: 110px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<i class="fas fa-home fa-2x menu-icon"><span>Početna</span></i>
</body>
</html>Answered By - seantsang94121
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.