I have a header with five images. I want the images to transition 10px up when hovered, but for some reason they just move up instantly and do not go up smoothly. I am using Google Chrome.
.navbar img {
position: relative;
top: 0px;
transition: transform .2s ease-in-out;
}
.navbar img:hover {
transform: translate3d(0px, -10px, 0px);
-webkit-transform: translate3d(0px, -10px, 0px);
}
You can look up the site, http://pannariz.com. That's what it looks like
You could try -webkit-transition: all .2s ease-in-out; since you only apply transform.
YOu could also try -webkit-transition: -webkit-transform .2s ease-in-out; as another solution for webkit browsers.
Related
I have an image that increases your score every time you click it. I want to make it more interesting so that the image slightly shrinks when you click it, and enlarges to normal size again when you let go of the click. How would I do this animation/effect. (With CSS)
CSS3 transitions is the best way: in this example is a div, try with img.
Multiple declarations are used to ensure compatibility with all browsers.
div {
width: 100px;
height: 100px;
background: green;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
div:active {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
<div>
</div>
parentDiv:hover > img{
padding: 15px;
}
Can someone help me understand how, using CSS, I can rotate and change an image at the same time on hover? When a user hovers over an image I want to start the rotation and change the image during the middle of the rotation. So far I have the following but I can not figure out how to delay the image change on hover.
.image-swap {
background: url("image1.jpg") no-repeat;
border-radius: 50%;
height: 300px;
width: 300px;
-moz-transition: -moz-transform 0.8s ease-in-out;
-webkit-transition: -webkit-transform 0.8s ease-in-out;
-o-transition: -o-transform 0.8s ease-in-out;
-ms-transition: -ms-transform 0.8s ease-in-out;
transition: transform 0.8s ease-in-out;
}
.image-swap:hover {
background: url("image2.jpg") no-repeat;
cursor: pointer;
-moz-transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
You really just need to add background-image to the transition rule.
In this example, I also use a container element to trigger the hover (otherwise the interactive area rotates with the image, which causes jerkiness if the cursor gets caught on, say, a moving corner).
.image-swap-container {
width: 300px;
height: 300px;
overflow: hidden;
}
.image-swap {
background-repeat: no-repeat;
background-image: url("http://placehold.it/300x300/ff0000");
border-radius: 50%;
height: 300px;
width: 300px;
transform: none;
transition: transform 1s, background-image 1s;
}
.image-swap-container:hover {
cursor: pointer;
}
.image-swap-container:hover .image-swap {
background: url("http://placehold.it/300x300/00ff00");
transform: rotateZ(360deg);
}
<div class="image-swap-container"><div class="image-swap"></div></div>
http://jsfiddle.net/x3Kc7/1/
.play {
border-radius: 50px;
height: 90px;
width: 90px;
transition: all .2s ease-out, background 2s ease-in;
-o-transition: all .2s ease-out, background 2s ease-in;
-ms-transition: all .2s ease-out, background 2s ease-in;
-moz-transition: all .2s ease-out, background 2s ease-in;
-webkit-transition: all .2s ease-out, background 2s ease-in;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
.play:hover {
transform: scale(1.2);
}
This code works perfectly in firefox, however not in chrome. What is incorrect?
You need the -webkit vendor for the transform property: -webkit-transform: scale(1.2), as it isn't supported in Chrome otherwise. Same goes for other -webkit browsers like Safari.
jsFiddle example - works in Chrome.
.play:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
Aside from that, you would also need:
-moz-transform: scale(1.2) if you want support in FF 16<
-ms-transform: scale(1.2) if you want support in IE9
-o-transform: scale(1.2) if you want support in Opera 12<
It will otherwise work in all major browsers.
You didn't include the -webkit- prefix for your hover animation.
Here is the JSFIDDLE
What I changed,
.play:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
}
I placed two images on top of one another (one in black and white and the other in color) and created a CSS transition wherein the opacity of one image decreases while the other increases. The result is a color on hover effect.
I'm having an issue though: at some point during the transition you can see through the image a little, indicating that the transition of opacity isn't linear even though the "transition-timing-function" property is set to linear.
If there was some kind of quadratic easing involved I'd understand why this is happening, but there shouldn't be?
(the reason I'm approaching this with pure CSS is because I haven't fully tackled JQuery yet)
Any ideas on how I can better implement this functionality?
My CSS is below, or visit this JSFiddle.
#container { width: 210px; height: 150px; display:block; border: 4px solid #ccc; position:relative; overflow:hidden; margin: 10px 0 0 10px;}
.image { width: 210px; height: 150px; display:block; position:absolute; left: 0px; top:0px; }
#dbw {
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
background: url("http://oi42.tinypic.com/x0y2ky.jpg");
zoom: 1;
filter: alpha(opacity=100);
opacity: 1;
}
#dco {
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
background: url("http://oi40.tinypic.com/28gwcrb.jpg");
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
}
#container:hover #dbw {
filter: alpha(opacity=0);
opacity: 0;
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
#container:hover #dco {
filter: alpha(opacity=100);
opacity: 1;
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
The problem isn't that the transition isn't linear, it's simply that if you put two non-opaque images on top of each other, the background is always partly visible.
For example, where the transitions meat in the middle, both images are 50% opaque. The bottom image covers 50% of the background, and the top image covers 50% of the remaining 50% of the background, leaving 25% of the background shining though.
Just leave the bottom image opaque, and let the top image take over in the transition:
http://jsfiddle.net/qvcRf/4/
I.e. remove the opacity transition on the bottom image:
#container:hover #dbw {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
Here is the problem with the code bellow. I want to create zoom-like effect with css. I am adding the classes zoomIn or zoomOut with jquery on certain events, which is not important right now.
The problem is that in Chrome and Safari (webkit based) the zoom in and out start from 0. In firefox for instance the transition starts from the current image height and extends to 1160px in this case. The webkit browsers however seem to handle things different and start the transition from 0 to 1160px
I ain't got no clever way to solve this so please help
Cheers
The images have also a class of 'full'
.full {display:block;position:absolute;width:100%;top:0;left:0;}
.zoomIn{
top:0;left:0;
box-sizing: border-box;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
height: 1160px !important;
left: 50%;
margin-left: -960px !important;
margin-top: -670px !important;
top: 50%;
width: 1920px;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-ms-transform: scale(1.2);
}
.zoomOut {
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-moz-transform: scale(1);
margin-left: 0 ;margin-top: 0;
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-ms-transform: scale(1);
}