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);
}
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;
}
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).
Basically what I'm looking for is to be able to make an image do a rotation of 360 degrees and enlarge the image, I already have these two down.
What I need to do now is, work out how to actually make it rotate 360 degrees and enlarge to a different image, here's the css that I have:
.rotate img {
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.rotate img:hover {
cursor: crosshair
-moz-transform: rotate(360deg) scale(1.25);
-webkit-transform: rotate(360deg) scale(1.25);
-o-transform: rotate(360deg) scale(1.25);
-ms-transform: rotate(360deg) scale(1.25);
transform: rotate(360deg) scale(1.25);
}
This code works fine, all I need to know is how to make it turn into a different image.
If you can use a <div> with a background image rather than an actual <img> you can do it with css pretty easily.
Working Example
.rotate {
background: url("http://lorempixel.com/output/abstract-q-c-100-100-7.jpg") no-repeat;
height: 100px;
width:100px;
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.rotate:hover {
background: url("http://lorempixel.com/output/abstract-q-c-100-100-8.jpg") no-repeat;
cursor: crosshair;
-moz-transform: rotate(360deg) scale(1.25);
-webkit-transform: rotate(360deg) scale(1.25);
-o-transform: rotate(360deg) scale(1.25);
-ms-transform: rotate(360deg) scale(1.25);
transform: rotate(360deg) scale(1.25);
}
It can be done with some JavaScript added in... Also - rotate 2 divs rather than the img. Place one image in each div, over the other. As you rotate, fade the overlapping div (change the opacity) to 100%. This will give you the effect of fading one image into the next.
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);
}
CSS looks as follows:
.rotate
{
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}
.rotate:hover
{
-webkit-transform: rotate(90deg) scale(1);
-moz-transform: rotate(90deg) scale(1);
-o-transform: rotate(90deg) scale(1);
-ms-transform: rotate(90deg) scale(1);
}
Hovering over a <span class="rotate"> will rotate the element in Firefox but not chrome.
Demo: http://jsfiddle.net/BuHGQ/ (hover over the arrow)
What can be done so that it works in Chrome?
Try this:
.rotate { display: inline-block; }
http://jsfiddle.net/y7nfD/1/