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;
}
Related
I have the following picture of an arrow
What I would like to achieve is to let this arrow arise (grow) via CSS.
How could I achieve this? I would prefer a CSS3 only solution if it was possible.
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.zoomin img {
height: 200px;
width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.zoomin img:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="zoomin">
<img src="img/image.png" />
</div>
</body>
</html>
Hope this helps
A simple example using CSS3 tranform and transition properties :
HTML :
<img id="arrow" alt="arrow" src="http://i.stack.imgur.com/x0Pe8.png">
CSS :
#arrow {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-o-transform: scale(0.3);
-ms-transform: scale(0.3);
transform: scale(0.3);
}
#arrow:hover {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
See Fiddle
Then you can play with other transform property values if you need a different effect (rotate, translate, skew, or more complex transformations).
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>
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.
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);
}