I face such problem:
Mouseover on the right side, where the word heree is and you will get endless spinning (i use Firefox).
How to solve this?
button{
transition: 0.5s all;
transform:none;
}
button:hover{
transform:rotateY(360deg) scale(1.4);
margin:5px;
}
<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>
P.S. If I remove margin parameter, then it works ok. But i want margin too!
I believe this is because of all transition.
Set it only for the transform and I guess the issue is resolved here- in Firefox maybe the combination of scaling and margin on hover of the button is causing the issue.
button{
transition: 0.5s transform;
transform:none;
}
button:hover{
transform:rotateY(360deg) scale(1.4);
margin:5px;
}
<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>
Let me know your feedback on this.Thanks!
It looks like your button:hover + margin is getting transitioned by 0.5s as well as the transform. You just need to be a more specific with the transition : transition: 0.5s transform;
button{
transition: 0.5s transform;
transform:none;
}
button:hover{
transform:rotateY(360deg) scale(1.4);
margin:5px;
}
<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>
Related
The problem I have is that when I set a:
.banner-division2 h2:hover {
-webkit-transition: 0.6 ease;
transition: 1s ease;
-webkit-transform: scale(1.2);
transform: scale(1.2);
color: #00C8BD;
}
It will only transition for the first part of the hover. In other words, once the mouse has exited the "hover" area, it will automatically go back to it's original form - however, I want it to transition ease back into it's original form (it isn't doing this).
Many thanks.
You need to put the transition property on the element you want the effect, not on the :hover.
Like this
h2 {
color: blue;
transition: 1s ease;
}
h2:hover {
color: red;
}
If this not work , try to add the value all on the transition property
You have defined the transition for the :hover state only. When not in :hover, no transition is defined - and ofc, none does happen. So split your rule:
.banner-division2 h2 {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.banner-division2 h2:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
color: #00C8BD;
}
This way, the transition targets your h2, not only your h2:hover.
Code: https://jsfiddle.net/xakhLafd/
Hello,
I'm trying to have an image enlarge on hover and use an ease transition. It works, but it seems to bug out sometimes. I tried to fix this by setting:
-webkit-transition-property: height,width;
But to no avail. Also, I'm trying to understand how the author of this code (I got some of the code from a CSS blog) achieves this. I understand how on hover the image changes its width, but I'm not sure why the author is setting negative top and left values. I have been trying to edit the width, height, top, and left to get the desired size on hover, but it seems to become skewed - probably because I don't understand what the negative top and left values are doing. Can anyone shine some light on this? I've read some articles on negative margins, but I don't understand what's being done here.
Here's the code:
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
.thumbnail{
width: 100px;
height: 100px;
}
.thumbnail:hover {
position:relative;
top:-50px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
The top:-50px; left:-35px; rule in CSS is used to keep the image's center-point unchanged after it is enlarged. Otherwise, when image is enlarged, you will feel it is moved to right-bottom side.
However, this is not a good design -- width/height change requires calculating new layout and redraw UI elements on every animation frame, which is very expensive (you can check this SO for difference between repaint and reflow). That's why you feel "it seems to bug out sometimes."
A better way is using transform. Please check the jsfiddle that fix the issue. The new CSS code is:
.thumbnail{
width: 100px;
height: 100px;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
.thumbnail:hover {
transform: scale(5);
}
Here is the fiddle I created that fixes the issue. I got rid of position relative and set the height to auto instead of 100px.
here is the code i did.
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg"
class="thumbnail"/>
.thumbnail{
width: 100px;
height: auto;
position:relative;
}
.thumbnail:hover {
width:500px;
height:auto;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
Sorry forgot to update the fiddle here is the new link.
https://jsfiddle.net/xakhLafd/1/
If you want something simple, this is code I'm working on atm:
.box img {
margin: 1rem auto;
border: 2px solid white;
cursor: pointer;
transition: all .5s ease;
}
.box img:hover {
border-radius: 10px;
transform: scale(1.5);
}
I'm trying to put hovering effect on a autoloop video such as this website - http://campaign.mcdonalds.com.tw/McCafe/ does
this part of the website
Before hovering, the autoloop video is having an overlay.
When hovering, the overlay will disappear and the video will enlarge a little bit.
How can I achieve this hovering effect?
Some CSS magic:
.vid-container {
width:100px;
height:100px;
background:#c90;
transition: all 0.5s ease-out;
position:relative;
}
.vid-container::after {
content: " ";
width:100%;
height:100%;
background: rgba(0,0,0,0.5);
position:absolute;
top:0;
left:0;
transition: all 0.5s ease-out;
pointer-events: none;
}
.vid-container:hover {
transform: scale(1.2,1.2);
}
.vid-container:hover::after {
opacity:0;
}
<div class="vid-container">
Your video here
</div>
I have created a FIDDLE for you showing you how to use the scale property to scale your video up or down and also how you can control the opacity of the video.
HTML:
<iframe width="560" height="315" src="https://www.youtube.com/embed/ie-C7DQVNKw" frameborder="0" allowfullscreen></iframe>
css:
iframe {
transform: scale(1, 1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
iframe:hover {
transform: scale(1.1,1.1);
filter: alpha(opacity=80);
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
}
Explanation:
So, I am doing two things here:
For normal state I am using the transform property to scale the video to 1,1 which is optional and not needed but still I kept it to for you to understand.
And when I hover over the div the iframe is scaled to (1.1 , 1.1) which means 10% increase in size in both x and y direction.
For hover state I have applied opacity to the iframe.
I have an over hover animation glitch. When you're near the bottom of the item, it jumps, uncontrollably, is there any fix?
Sample image :
.btn:hover{
background-color: #2795de;
-moz-transform: translate(0, -1.3em);
-o-transform: translate(0, -1.3em);
-webkit-transform: translate(0, -1.3em);
}
Just set transition on .btn
.btn{
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-webkit-transition: all 2s ease;
}
.btn:hover{
background-color:#2795de;
-moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em);
}
DEMO
.btn{
width:200px;
height:200px;
border-radius:4px;
background: red;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-webkit-transition: all 2s ease;
}
.btn:hover{
background-color:#2795de;
-moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em);
}
<div class=btn > HOVER ME </div>
The jump is being caused by the translate property in your CSS definitions.
If the jump is unintended, you can simply remove it from your CSS definition :
.btn:hover{
background-color:#2795de;
/* -moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em); */
}
Or you can split the css into two parts :
.btn{
-moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em);
}
.btn:hover {
background-color:#2795de;
}
remove your btn.hover and write only btn because hover is take event when your mouse cuser comes up on your button(.btn). so remove it.
and write
`.btn{
background-color:#2795de;
-moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em);
}`
Basically your button is only going up on :hover but the distance that it goes up puts your button out of :hover state and it goes down. When it goes down it goes under the cursor again and goes into :hover state.
depending on what you want to achieve but instead of actually moving your button up on hover just change the background-color of it. You'll find people will be unable to actually click on it. Or just add a large padding-bottom so when button goes up the cursor still stays in :hover state.
I'm trying to rotate an image in a div on hover while adding a border radius. It works perfectly until a transition is added.
Here is my css
.box{position:relative; height:300px; width:300px; display:block;overflow:hidden; }
img{position:relative;z-index:2; opacity:1;}
.box:hover img{border-radius:150px;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);-webkit-transition:all .5s linear;transition:all .5s linear; }
Here is the HTML
<div class="box">
<img src="http://i.imgur.com/ZzgHX9M.jpg" alt="beach">
</div>
Here is a demo on CodePen.
I could probably accomplish this with a background image, but for the purpose of the final project that wouldn't work. Any help is greatly appreciated.
Thanks!
Note: There will eventually be a caption div inside the .box div
Can't find a solution. Is the rotate functionality really important? Please see this fiddle if it is ok without rotate functionality.
Fiddle
I just removed the translate:rotateY
Hope that this helps.
I have a solution that works in Chrome and Firefox- I specify the transition as "transform" instead of using "all". please let me know if this is helpful?
Here is the CSS:
.box{
position:relative;
height:300px;
width:300px;
display:block;
overflow:hidden;
}
img{
position:relative;
z-index:2;
opacity:1;
}
.box:hover img{
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius:150px;
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
-webkit-transition: transform .5s linear;
transition: transform .5s linear;
}