I am trying to make an icon rotate on mouse hover but can't get it to work.
I couldn't find a solution on the internet.
This is what I've tried so far:
#import url('https://fonts.googleapis.com/icon?family=Material+Icons');
.material-icons:hover {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
button.c-accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 5px;
width: 50%;
border: none;
border: 1px solid #CBCBCB;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.float-right{
float: right;
}
<button class="c-accordion">Section 2
<i class="material-icons float-right">keyboard_arrow_down</i>
</button>
Am able to find two issues,
rotate is working fine in chrome, but not working in firefox.
transition is not smooth as mentioned by others.
So for first issue changed hover pseudo from icon to button because there is an issue in firefox when <i> used inside button. For second one followed as like others by adding transition.
#import url('https://fonts.googleapis.com/icon?family=Material+Icons');
.c-accordion:hover .material-icons {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
transition: all .3s ease;
}
button.c-accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 5px;
width: 50%;
border: none;
border: 1px solid #CBCBCB;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.float-right {
float: right;
}
<button class="c-accordion">Section 2
<i class="material-icons float-right">keyboard_arrow_down</i>
icon rotate on mouse hover on chrome but not on Mozilla Firefox same code work on my side on chrome
Related
I have a simple button, that I want to scale up by 10% when the user hovers on it.
I tried to achieve that by using css3 "transform: scale(1.1);" together with "transition: all .3s ease-in-out;".
It scales the button up, but also causes the text to flicker in the process. I tested it in Chrome, FF and IE - all had the same issue.
CSS:
a {
display: inline-block;
padding: 30px;
margin-top: 10%;
margin-left: 15%;
font-size: 20px;
color: #fff;
background-color: #000;
text-decoration: none;
transition: all .3s ease-in-out;
}
a:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Example: https://jsfiddle.net/Lfwnejkc/1/
I tried to find a solution and finally managed to fix it in Chrome by adding "backface-visibility: hidden;" to the button. The text is now bit blurrier but thats alright. Unfortunately for FF and IE this doesn't work and text inside the button is still flickering when it scales up.
a {
display: inline-block;
padding: 30px;
margin-top: 10%;
margin-left: 15%;
font-size: 20px;
color: #fff;
background-color: #000;
text-decoration: none;
transition: all .3s ease-in-out;
backface-visibility: hidden;
}
a:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Example: https://jsfiddle.net/Lfwnejkc/2/
I spent half a day yesterday googling around and trying to fix it. Unfortunately so far I haven't been successful.
Has anyone encountered such a problem and what is the best way to fix it?
Not perfect, but somehow better, is to move the element in the z plane, and get the zoom effect as a result of the perspective
a {
display: inline-block;
padding: 30px;
margin-top: 10%;
margin-left: 15%;
font-size: 20px;
color: #fff;
background-color: #000;
text-decoration: none;
transition: all 1s ease-in-out;
transform: perspective(1000px) translateZ(0px);
}
a:hover {
transform: perspective(1000px) translateZ(300px);
}
BUTTON
awesome that you use your precious time to read my question!
I'm trying to flip a div on hover. All goes fine but it flickers during the transition. It almost looks like it's flipping multiple times! This ruins the whole effect of the flip. Here follows my code and a fiddle:
The fiddle: FIDDLE
And for the CSS:
.rotate {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
padding:20px;
background-color: #333;
width: 200px;
text-align: center;
margin: 0 auto;
font-family: sans-serif;
color: #FFFFFF;
border-top: #E9F01D 3px solid;
}
.rotate:hover {
letter-spacing: 5px;
color: #E9F01D;
cursor: pointer;
-ms-transform: rotatex(360deg);
-webkit-transform: rotatex(360deg);
transform: rotatex(360deg);
}
Is this flicker effect preventable or not? If so how do I do it?
Thanks in advance!
As mentioned in the comments:
The main trouble is: While hovering over a moving (or animated) div, you may just un-hover from the element because it moves beneath your cursor.
Solution: Place the hover-selector on a containing element which does not alter its size while you hover:
Example Here.
.rotate {
width: 200px; height:80px;
background:green;
}
.rotate .rotate-inner {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
padding:20px;
background-color: #333;
text-align: center;
margin: 0 auto;
font-family: sans-serif;
color: white;
border-top: #E9F01D 3px solid;
}
.rotate:hover .rotate-inner {
letter-spacing: 5px;
color: #E9F01D;
cursor: pointer;
-webkit-transform: rotatex(360deg);
-moz-transform: rotatex(360deg);
-ms-transform: rotatex(360deg);
transform: rotatex(360deg);
}
<div class="rotate">
<div class="rotate-inner">HOVER ME</div>
</div>
Page with buttons here: http://teamcherry.com.au/jam-games/
The effect I'm trying to achieve with the links on this page is that the button expands when hovered, with the text remaining the same size, and the text staying in the same position on the screen (so the button doesn't appear to 'move' when changing size).
After researching for a while, I've managed to achieve the desired effect using the below css, which changes the padding an margin on hover using css transition:
a.btn {
display: inline-block;
background-color: #d11b34;
color: #fff;
text-decoration: none;
font-size: 20px;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
transition: all 0.3s ease 0s;
}
a.btn:hover {
background-color: #a61529;
padding: 15px;
padding-right: 25px;
padding-left: 25px;
margin: -5px;
}
This achieves the effect, but the effect is super jittery when animating in Chrome (and possibly other browsers) and the button seems to quiver when hovering.
Is there another way to achieve this precise effect without animation jittering? Ideally in pure CSS but if JS or JQ is required then that's what I'll use.
Use hardware acceleration and add a bit more time to the animation (you can adjust if needed) and it looks nice. You can also use ease-in-out for a smoother effect. Tested in FF and Chrome
a.btn {
display: inline-block;
background-color: #d11b34;
color: #fff;
text-decoration: none;
font-size: 20px;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
transition: all 0.6s ease;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
I achieved this by box-shadow
a {
transition: .2s ease;
&:hover {
box-shadow: 0 0 0 .3rem $color;
}
}
use transition scale . That is smoother solution for you :)
a.btn {
display: inline-block;
background-color: #d11b34;
color: #fff;
text-decoration: none;
font-size: 20px;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
a.btn:hover {
-webkit-transform: scale(1.05,1.07);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1.05,1.07);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
Tested in chrome console. Hope it helps :)
I am trying to create a header with CSS3 animation and I am encountering a problem. The problem is that the menu links do not show up in IE10 on load. However, the menu items do show up when I randomly move the mouse over the area where the links should have been present.
I searched a lot but cannot find the root-cause. However, I managed to sort of figure out that this happens only in IE10 and that too only when the animation is enabled.
Below, I have included two jsFiddle versions. One is without animation property where the menu is displayed correctly. The other is with animation where the menu doesn't show up.
With Animation | Without Animation
Note:
There are no issues in Chrome 30, FireFox 23, Opera 15 and Safari
5.1.7
The Heading and Sub-heading will have multi-lingual text which would be fetched from Database. Hence I don't want to do this
animation with images. I am also not looking for any JavaScript or
jQuery alternates/work-arounds.
HTML
<header id="header">
<div id="banner" class="banner left">
<div id="first_line">Heading</div>
<div>Sub-heading</div>
</div>
<nav class="menu right">
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
<li class="mselected">Link5</li>
<li>Link6
</li>
</ul>
</nav>
</header>
CSS
.left {
float: left;
}
.right {
float: right;
}
#header {
background-color: black;
color: white;
font-size: 15px;
height: 70px;
padding-top: 20px;
overflow: hidden;
}
.banner {
cursor: default;
letter-spacing: 1px;
padding-left: 10px;
-webkit-animation: entry 2s linear 2s 5 alternate;
-moz-animation: entry 2s linear 2s 5 alternate;
animation: entry 2s linear 2s 5 alternate; /* This seems to cause the problem */
}
#-webkit-keyframes entry {
from {
-webkit-transform: scale(0.5) rotateX(0deg);
}
25% {
-webkit-transform: scale(0.625) rotateX(90deg);
}
75% {
-webkit-transform: scale(0.875) rotateX(270deg);
}
to {
-webkit-transform: scale(1) rotateX(360deg);
}
}
#keyframes entry {
from {
transform: scale(0.5) rotateX(0deg);
}
25% {
transform: scale(0.625) rotateX(90deg);
}
75% {
transform: scale(0.875) rotateX(270deg);
}
to {
transform: scale(1) rotateX(360deg);
}
}
#-moz-keyframes entry {
from {
-moz-transform: scale(0.5) rotateX(0deg);
}
25% {
-moz-transform: scale(0.625) rotateX(90deg);
}
75% {
-moz-transform: scale(0.875) rotateX(270deg);
}
to {
-moz-transform: scale(1) rotateX(360deg);
}
}
.menu {
padding-right: 10px;
letter-spacing: 0.5px;
}
#first_line {
font-size: 30px;
line-height: 45px;
}
.menu ul {
margin-top: 45px;
}
.menu li {
list-style: none;
display: inline;
padding: 10px 10px 10px 10px;
border: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background-clip: padding-box;
}
.menu li a {
color: white;
}
.menu li:hover {
background-color: white;
}
.menu li:hover a, .menu li a:hover {
color: black;
}
.mselected {
background-color: white;
color: black;
}
It seems like the issue is caused due to the delay set for the animation. If we remove the delay, it works as expected and the links are displayed on page load. Fiddle
animation: entry 2s linear 5 alternate;
Note: This is just a work-around solution. I will update if I manage to find out the reason why it doesn't work with animation delay.
UPDATE
here is a js-fiddle with images available: http://jsfiddle.net/TBwWw/
I am using a tutorial that I found here.
I have an unordered list that simply links the image to a larger one and also displays the image on the page.
<ul class="polaroids">
<li>
<a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!">
<img src="example/cyan_hawk.jpg" alt="Roeland!">
</a>
</li>
</ul>
And then css that is supposed to be adjusting the image size, add the polaroid effect and a whole lot more.
ul.polaroids a:after {
content: attr(title);
}
/* By default, we tilt all our images -2 degrees */
ul.polaroids a {
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
transform: rotate(-2deg);
}
/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg);
}
/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) a {
-webkit-transform: none;
-o-transform: none;
-ms-transform: none;
-moz-transform: none;
transform: none;
position: relative;
top: -5px;
}
/* Rotate every fifth image by 5 degrees and offset it */
ul.polaroids li:nth-child(5n) a {
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-moz-transform: rotate(5deg);
transform: rotate(5deg);
position: relative;
right: 5px;
}
/* Keep default rotate for every eighth, but offset it */
ul.polaroids li:nth-child(8n) a {
position: relative;
top: 8px;
right: 5px;
}
/* Keep default rotate for every eleventh, but offset it */
ul.polaroids li:nth-child(11n) a {
position: relative;
top: 3px;
left: -5px;
}
/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
ul.polaroids a:hover {
-webkit-transform: scale(1.25);
-ms-transform: scale(1.25);
-o-transform: scale(1.25);
-moz-transform: scale(1.25);
transform: scale(1.25);
position: relative;
z-index: 5;
}
/* Add drop shadows and smooth out the transition (Safari only) */
ul.polaroids a {
-webkit-transition: 0 .15s linear;
-moz-transition: 0 .15s linear;
-o-transition: 0 .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
/* On hover, darken the shadows a bit */
ul.polaroids a {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
The end result is supposed to be:
But they are just appearing with just the unordered list text decoration and the after title effects like so:
Everyone else in the comments on the tutorial said it worked just fine. I don't understand why it isn't working for me. I do have the css in an external style sheet that is linked and being found correctly. Finally, the Google Chrome console is showing no errors. I have tried it in Google Chrome and Internet Explorer.
Try this:
http://jsfiddle.net/jC84f/1/
ul.polaroids { width: 970px; margin: 0 0 18px -30px; }
ul.polaroids li { display: inline; }
ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
ul.polaroids img { display: block; width: 190px; margin-bottom: 12px; }
ul.polaroids a:after { content: attr(title); }
ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); }
ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px; -moz-transform: none; }
ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px; -moz-transform: rotate(5deg); }
ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }
ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }
ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }
code { background: rgba(0,0,0,.5); padding: 2px 3px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.75); -webkit-border-radius: 3px; -moz-border-radius: 3px; }
ol.code { background: rgba(0,0,0,.75); margin-bottom: 18px; border: solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); }
ol.code li, ol.code li code { font-size: 14px !important; }
ol.code code { background: none; }
First off, all the images are supposed to be in a single ul, not separate ones as you have in your fiddle. Second, you're missing the list styles, and display/float properties to make things wrap.
I was able to get your example to wrap by adding the following CSS:
ul { list-style: none; }
ul li { display: inline; }
ul a {
display: inline;
float: left;
}
ul img { display: block; }
I think this is essentially what you're missing, so you'll probably want to adjust things to how you like (including spacing, classes, etc.). Here is my fiddle: http://jsfiddle.net/jC84f/3/