Here I created jsFiddle which kind of replicates my problem
After animation (clicking on MOVE twice), fixed column comes back with wrong position.
is it possible to animate my this without using left or right for fixed positioned element?
Updated jsfiddle http://jsfiddle.net/z8fBD/7/
Trick is to add reset translate on #body
#body {
position:absolute;
left: 0;
top:0;
width: 200px;
-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;
-webkit-transform: translate(0%,0px);
-moz-transform: translate(0%,0px);
-ms-transform: translate(0%,0px);
-o-transform: translate(0%,0px);
transform: translate(0%,0px);
}
You have to add margin:0px and padding:0px to your <body> because position:fixedlead element attop` without considering padding and margin with document.
Please check here
JsFiddle Demo
Remove "position: fixed;" from the #fixed style and it works fine...
Related
I have an img tag that I want to zoom in on when hovering on a parent element, without having the container change size. I have the code:
.results_box_custom:hover p img{
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s ease-in-out;
}
Which works on a different page but not on this page.
any help is appreciated!
You want to hide the overflow on the parent element. Add .results_box_custom p { overflow: hidden; }
When you hover over image1div, it scales to 0.95 and fades to 80% opacity. It works in Chrome and Firefox but not Safari. It fades and scales instantly in Safari rather than smoothly in 0.5s.
.image1div {
width: 350px;
height: 350px;
margin-top: 0px;
float: right;
background-color: #5a89ad;
background-size: cover;
filter:alpha(opacity=100);
-webkit-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transition: opacity 0.5s ease, transform 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.image1div:not(.no-hover):hover {
-webkit-transform: scale(0.95,0.95);
-ms-transform: scale(0.95,0.95);
transform: scale(0.95,0.95);
opacity:0.8;
filter:alpha(opacity=80);
}
I think it has to do with the filter property.
Transition is supported by safari: http://caniuse.com/#feat=css-transitions
Also the filter property, but you need to add a prefix: http://caniuse.com/#feat=css-filters
Let me know if it helps, if not, provide more details and we will find a workaround.
-- EDIT
Instead of transition: opacity, transform. Use all, or check out how you can add multiple properties CSS transition shorthand with multiple properties?
There's a problem using css transitions, watch here:
http://jsfiddle.net/vwtqhbt2/
Using styles:
.hexagon-in2:hover .polygon{
transform: rotate(30deg);
bottom: 0px;
}
.hexagon-in2 .polygon{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
On FF and Chrome - the same effect on hover, i didn't applied any bluring effect but on hover you can see it. Any suggestions how to solve it?
Edit: found a better (or shorter?) solution.
Just simply remove transform: rotate(30deg); in your
.hexagon-in2:hover .polygon{
transform: rotate(30deg);
bottom: 0px;
}
so it will be like this
.hexagon-in2:hover .polygon{
bottom: 0px;
}
http://jsfiddle.net/vwtqhbt2/2/
Old solution
There is a way to remove the difference effect before and after transition. That is use translateZ(0)
like
transform: rotate(-60deg) translateZ(0);
-webkit-backface-visibility: hidden; /* optional */
http://jsfiddle.net/vwtqhbt2/1/
but your image always blury. If you dont want that blurry, I can suggest using another CSS trick to make hexagon. Because the blur cause by the transform of your image. It got rotated several times.
In this case try to use Triangle css trick, sizing it then put 4 triangles at the 4 corners (you need it in the right size or else it wont look like hexagon) . Give them high z-index to cover the corners of the box. Then style stuff inside.... Voila~~
4 red triangles will be in these positions to simulating the hexagon
Image out of box. It seems that is not the right think I do. If anyone can help I would be glad.
Thank You!
Here You can find Demo
.box {
width:210px;
height:210px;
border-radius:50%;
border:3px solid yellow;
cursor: default;
overflow: hidden;
}
img{
overflow: hidden;
width:210px;
height:210px;
z-index:-1;
display: block;
position: relative;
-webkit-transition: all 0.6s ease-in-out;
-moz-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;
}
.box:hover img{
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
It's seems the problem is only on webkit browsers. I make some research after catch that border-radius property crash the scale transition and I found this
overflow:hidden ignored with border-radius and CSS transforms (webkit only)
You have to put -webkit-mask-image: to the parent div to fix that.
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
http://jsfiddle.net/Jx8xF/16/
Edit: And have you attention, that background-size is expensive operation - see this article on Fix 4. Remove background-size CSS property if it slows down your website
http://kristerkari.github.io/adventures-in-webkit-land/blog/2013/08/30/fixing-a-parallax-scrolling-website-to-run-in-60-fps/
And finally you can see that zoomin the image is more smooth with scale() css transition method than background-size
EDIT2: code update on http://jsfiddle.net/Jx8xF/19/
Tested on Safari 5.1.7, Chrome, Mozilla, IE10, Opera, Opera Next
As you can see the Safari browser is only who have problems after first fix. For him you need to set
-webkit-transform: translateZ(0);
And that is not all. You need to group two layers for the border bug, and wrap it with another div. In code you can see the complete fix in HTML and CSS file.
This effect can be better achieved by removing the img element, and instead using the image as a background on the .box element. Then you use transition on the background-size property.
Here is a working example on CodePen. Example code below.
.box {
-webkit-transition: all 0.4s ease;
width:210px;
height:210px;
border-radius:100%;
border:3px solid yellow;
background: url('http://fc07.deviantart.net/fs71/f/2012/144/b/6/barn_owl_leather_mask_by_teonova_by_teonova-d50xl3v.jpg') center center;
background-size: 100%;
}
.box:hover{
-webkit-transition: all 0.4s ease;
background-size: 150%;
}
I'm using ccs3 to fade in an image on hover. I'd like that same image that fades in on hover to rotate. I seem to be missing something.
Here is a jsfiddle. http://jsfiddle.net/5ftZ7/
<div id="cf">
<img class="bottom" alt="" src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/pin-over.png" /> <img class="top" alt="" src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/pin.png" />
</div>
#cf {
position:relative;
margin:30px auto;
width:200px;
height:200px;
}
#cf img {
margin-top:30px;
position:absolute;
left:0;
top:0;
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
-webkit-transition: -webkit-transform 0.2s ease-in;
}
#cf img.top:hover {
opacity:0;
position:absolute;
left:0;
top:0;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
There are a variety of issues that culminate in this not working the way you want:
Understanding of transition rules
CSS properties cannot accumulate. There is nothing special about the transition rule:
transition: opacity .2s ease-in-out;
transition: transform .2s ease-in-out;
The second declaration overrides the first. This would be no different than:
color: red;
color: blue;
being blue. You can use multiple comma-separated transition definitions, or use the special all property:
transition-property: opacity, transform;
transition-duration: .2s;
transition-timing-function: ease-in-out;
/* or */
transition: opacity .2s ease-in-out, transform .2s ease-in-out;
/* or, but this may affect properties you do not want */
transition: all .2s ease-in-out
:hover with stacked elements.
.top is on top of .bottom, so .bottom cannot be hovered even when .top is transparent. This prevents rules that you would want to apply to .bottom from being applied. The simplest solution to this is just to check for :hover on #cf instead, as in #cf:hover img.top as the selector.
transform missing from .bottom
.bottom also needs the transform rules when it is hovered so it can rotate in sync with .top.
Here is a working example using only -webkit and increasing the transition durations for effect.
http://jsfiddle.net/ExplosionPIlls/5ftZ7/1/
I guess what you are trying to achieve is this:
Fiddle: http://jsfiddle.net/marionebl/5ftZ7/2/.
Includes -webkit- only for brevity. What this does:
Uses the former .bottom as first layer in stack
Replaces .bottom with a html element mimicking the image in your fiddle. Could be a png with transparency, too.
Listen for :hover state on #cf instead of .bottom or .top
Fade the former .bottom in, rotate the former .top
you can't use several transitions on an element,
if you want to apply transition to several properties you can use "all"
transition: all 1s;
or comma separated transition:
transition: opacity 1s, transform 0.8s;
#keyframes rotation {
0% {
transform: rotate(0deg);
opacity: 0;
}
100% {
transform: rotate(359deg);
opacity: 1;
}
}