neqts
Reputation: 19
How to make fa-icon rotate on parent element hover
Hello I need advice with my project; I am tring to create a button with fa-icon (arrow) which is going to rotate 90* on hover, I have a fa-icon rotation which works when the icon itself is hovered, but I have problem, I want the arrow to rotate regardless of where I hover over the button element.
I want the arrow to rotate when you hover over the entire button, not just the arrow itself.
I am grateful for any help and your dedicated time :)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Raleway';
}
body {
color: #fff;
font-family: "Raleway";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0px;
overflow-x: hidden;
text-align: center;
}
/* video */
body > header > div {
position: absolute;
width: 100%;
height: 100%;
}
body > header > div > div.video-container{
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
overflow: hidden;
}
body > header > div > div.video-container > video{
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 50vw;
min-width: 485vw;
min-height: 150vh;
transform: translate(-50%, -50%);
}
/* video txt */
body > header > div > div.video-overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: 'Raleway';
display: flex;
}
body > header > div > div.video-overlay > h1 > span{
color: #e31b6d;
}
body > header > div > div.video-container:after{
position: absolute;
top: 0;
left: 0;
display: block;
content: '';
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
body > header > div > div.video-overlay > h1 > span > p{
margin-top: 20px;;
}
body > header > div > div.video-overlay > h1{
font-size: 32pt;
line-height: 36pt;
}
body > header > div > div.video-overlay > p{
font-size: 32pt;
line-height: 36pt;
}
/* button */
body > header > div > div.video-overlay > div{
border: 2px solid #fff;
box-sizing: inherit;
cursor: pointer;
display: inline-block;
font-size: 13pt;
padding: 10px 20px;
transition: all 0.5s;
}
body > header > div > div.video-overlay > div:hover{
background-color: rgb(4, 194, 201);
border-color: rgb(4, 194, 201);
}
.page-link {
cursor: pointer;
}
body > header > div > div.video-overlay > div > i{
margin-left: 10px;
transition: transform 0.3s;
}
body > header > div > div.video-overlay > div > i{
content: "\F054";
vertical-align: middle;
}
body > header > div > div.video-overlay > div > i:hover {
t -webkit-transform: rotate(45deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<title>Tomasz Topor</title>
</head>
<body>
<header>
<div class="wrapper">
<div class="video-container">
<video autoplay muted loop>
<source src="film/pulse.mp4" type="video/mp4">
</video>
</div>
<div class="video-overlay"> <h1>Hello, I'm <span>Thomas Topor.</span></h1>
<p>I'm a fornt-end web developer.</p>
<br>
<br>
<div class="button page-link">
View my work
<i class="mdi fas fa-arrow-right"></i>
</div>
</div>
</header>
</body>
</html>Upvotes: 0
Views: 347
Answers (1)
Aib Syed
Reputation: 3196
EDIT:
To achieve your desired output, simply update this:
body > header > div > div.video-overlay > div > i:hover {
t -webkit-transform: rotate(45deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
To this:
body > header > div > div.video-overlay > div:hover > i {
t -webkit-transform: rotate(45deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
This way you are targeting the icon on button hover, not just the icon.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Raleway';
}
body {
color: #fff;
font-family: "Raleway";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0px;
overflow-x: hidden;
text-align: center;
}
/* video */
body > header > div {
position: absolute;
width: 100%;
height: 100%;
}
body > header > div > div.video-container{
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
overflow: hidden;
}
body > header > div > div.video-container > video{
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 50vw;
min-width: 485vw;
min-height: 150vh;
transform: translate(-50%, -50%);
}
/* video txt */
body > header > div > div.video-overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: 'Raleway';
display: flex;
}
body > header > div > div.video-overlay > h1 > span{
color: #e31b6d;
}
body > header > div > div.video-container:after{
position: absolute;
top: 0;
left: 0;
display: block;
content: '';
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
body > header > div > div.video-overlay > h1 > span > p{
margin-top: 20px;;
}
body > header > div > div.video-overlay > h1{
font-size: 32pt;
line-height: 36pt;
}
body > header > div > div.video-overlay > p{
font-size: 32pt;
line-height: 36pt;
}
/* button */
body > header > div > div.video-overlay > div{
border: 2px solid #fff;
box-sizing: inherit;
cursor: pointer;
display: inline-block;
font-size: 13pt;
padding: 10px 20px;
transition: all 0.5s;
}
body > header > div > div.video-overlay > div:hover{
background-color: rgb(4, 194, 201);
border-color: rgb(4, 194, 201);
}
.page-link {
cursor: pointer;
}
body > header > div > div.video-overlay > div > i{
margin-left: 10px;
transition: transform 0.3s;
}
body > header > div > div.video-overlay > div > i{
content: "\F054";
vertical-align: middle;
}
body > header > div > div.video-overlay > div:hover > i {
t -webkit-transform: rotate(45deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<title>Tomasz Topor</title>
</head>
<body>
<header>
<div class="wrapper">
<div class="video-container">
<video autoplay muted loop>
<source src="film/pulse.mp4" type="video/mp4">
</video>
</div>
<div class="video-overlay"> <h1>Hello, I'm <span>Thomas Topor.</span></h1>
<p>I'm a fornt-end web developer.</p>
<br>
<br>
<div class="button page-link">
View my work
<i class="mdi fas fa-arrow-right"></i>
</div>
</div>
</header>
</body>
</html>Upvotes: 1
Related Questions
- Rotating icon on hover
- Rotate image on hover
- Rotate image on hover div
- How can I rotate font-awesome icon on hover without spinning texts?
- How do I rotate an icon with CSS on hover
- How to make image rotate on hover css
- Icon flipping on hover
- How can rotate the children when hover on it's parent of parent via css?
- Rotate icon with css on mouse hover
- Rotate Child Element From Parent:Hover