I got a map with 12 dots that each need to fade in on hover like in the demo. The problem is that I can't get the radius animated. Is it possible to fade the radius size of the SVG in with CSS or is there another way to do it? My second problem is that I can't get a background image in my SVG's. Is there a solution?
My code...
ya it is possible..
Fiddle
css
#container {
}
#kaart {
}
.fullkaart {
fill:#7FC577;
}
.cirkel {
fill: green;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
-webkit-transition: fill, -webkit-transform
-moz-transition: fill, -webkit-transform
-ms-transition: fill, -webkit-transform
-o-transition: fill, -webkit-transform
transition: fill, -webkit-transform
-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-ms-transition-duration: 3s;
-o-transition-duration: 3s;
transition-duration: 3s;
}
.cirkel:hover{
fill: yellow;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
-webkit-transition: fill, -webkit-transform
-moz-transition: fill, -webkit-transform
-ms-transition: fill, -webkit-transform
-o-transition: fill, -webkit-transform
transition: fill, -webkit-transform
-moz-transition-duration: 3s;
-ms-transition-duration: 3s;
-o-transition-duration: 3s;
transition-duration: 3s;
HTML
<circle class="cirkel" cx="245.929" cy="68.256" r="5.08" onmouseover="evt.target.setAttribute('r', '10');" onmouseout="evt.target.setAttribute('r', '5.08');"/>
I removed the onmouseover and onmouseout attributes from first two circle tags.
remove them and adjust scale accordingly
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).
I want to make element "tilt" on my page, to be more precise I have an .svg image (size 100px 100px) so I have these two css classes, and I have some strange effect, some small white line in upper left corner.
I have tried to add
-webkit-backface-visibility:hidden;
but it solws problem only in Chrome if I dont hover while page is loading.
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.tilt:hover {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-500deg);
-o-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
}
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.
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);
}
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/