Not really the z-index, but I found that best to describe the issue in a short title...
See this simplified example:
http://jsfiddle.net/sCnDx/
If you hover over the images, you will note that some of the corners are below other images.
If you remove the code pertaining to the rotation, all is working fine.. So the problem is that rotation or how it interacts with the scaling.
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
Is there anything that can be done about this or is this a browser bug?
(Tested in safari)
Thanks,
Wesley
#wesley giv e position:relative to your images like this :
img {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-transition: -webkit-transform .15s linear;
-moz-transition: -moz-transform .15s linear;
-o-transition: -o-transform .15s linear;
transition: transform .15s linear;
position:relative;
}
a img:hover {
-webkit-transform: scale(1.25) !important;
-moz-transform: scale(1.25) !important;
-o-transform: scale(1.25) !important;
transform: scale(1.25) !important;
position: relative;
z-index: 2;
}
because z-index only work on position relative, absolute & fixed.
check this fiddle http://jsfiddle.net/sandeep/sCnDx/3/
Z-index works for me.
http://jsfiddle.net/GY4Jp/
add to img
position: relative;
z-index: 1;
add to img:hover
position: relative;
z-index: 2;
Related
I am spinning a hamburger menu image by 90 degrees when a user hovers on it. See jsfiddle here
The problem is when the user moves off the image it goes back to its original position, however I want it to transition back to the original position, the same speed it animated originally, providing a smooth transition.
Does anyone know how to do this.
Also see my code below for convenience.
html
<button class="menu-button"><img src="https://api.icons8.com/download/d419bb211b7f4ad40cf595fb3ebc9464cdf2065e/Android_L/PNG/256/User_Interface/menu-256.png"></button>
css
.menu-button img {
width: 50px;
height: 50px;
}
.menu-button img:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: transform 1000ms ease-in-out;
-moz-transition:transform 1000ms ease-in-out;
-ms-transition:transform 1000ms ease-in-out;
}
You're not animating the returned state when the hover is no longer valid.
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
This should do it for ya.
https://jsfiddle.net/r7buoac0/2/
You can accomplish this by setting the initial animation state in the .menu-button img{} So when you're not hovering it will trigger the return animation.
.menu-button img {
width: 50px;
height: 50px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: transform 1000ms ease-in-out;
-moz-transition:transform 1000ms ease-in-out;
-ms-transition:transform 1000ms ease-in-out;
}
.menu-button img:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: transform 1000ms ease-in-out;
-moz-transition:transform 1000ms ease-in-out;
-ms-transition:transform 1000ms ease-in-out;
}
JS FIDDLE
Whenever I seem to apply some code to let's say move a div for example using the latest iOS Safari browser it doesn't actually transition between the two rules set. I have tried changing to use other than percentage values but still to this day, I have never been able to get it to work when I use transition: transform; for any translate property applied.
I'm using the correct prefixes and checked support and should be working no problem.
http://caniuse.com/#search=transition
http://caniuse.com/#search=translate
JSFiddle
$('button').on('click', function() {
$('.mydiv').toggleClass('added-class');
});
.mydiv {
display: inline-block;
width: 100px;
height: 50px;
background-color: red;
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
-moz-transition: transform 0.6s ease-out;
-o-transition: transform 0.6s ease-out;
-webkit-transition: transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}
.added-class {
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv"></div>
<button type="button">Toggle class</button>
Old versions of iOS Safari support only vendor-prefixed properties and values for transition and transform, so you should use -webkit-transition: -webkit-transform instead -webkit-transition: transform:
JSFiddle
$('button').on('click', function() {
$('.mydiv').toggleClass('added-class');
});
.mydiv {
display: inline-block;
width: 100px;
height: 50px;
background-color: red;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.6s ease-out;
-moz-transition: transform 0.6s ease-out;
-o-transition: transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}
.added-class {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv"></div>
<button type="button">Toggle class</button>
I have designed a little infinite carousel that uses a placeholder div element (that shrinks and expands), followed by a few images that scroll to one side on a button click, after which the element that moves off screen moves to the back of the queue again. Inside a container div element.
It works perfectly on Chrome and Firefox but the transition is very slow/jaggy on Safari 7.0 on Mavericks OS X. I've tried a few documented hacks to fix it but can't see any improvement.
I would like to know is someone can have a look at the css below and tell me if the hacks are placed on the right elements please?
#ContentGallery {
background-color: black;
z-index:1;
height: 600px;
position: absolute;
width: 2600px;
top: 0;
left: 0;
overflow: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-perspective: 1000;
}
.flipPagePhoto {
display: inline-block;
-webkit-transition: margin-left 0.75s ease-out;
-moz-transition: margin-left 0.75s ease-out;
-o-transition: margin-left 0.75s ease-out;
transition: margin-left 0.75s ease-out;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.flipPagePlacehold {
float: left;
margin-left: -100px;
width:300px;
height: 600px;
-webkit-transition: margin-left 0.86s ease-out;
-moz-transition: margin-left 0.86s ease-out;
-o-transition: margin-left 0.86s ease-out;
transition: margin-left 0.86s ease-out;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
<div id="ContentGallery">
<div class="flipPagePlacehold static"></div>
<img class="flipPagePhoto">
<!-- More images follow -->
</div>
I have the same issues with Safari 7 in many many places on my website mainly based on css transitions. Safari 7 is a step backwards for what regards smoothness of css transitions. I googled a lot but it seems still a matter of rare interest. Hopefully this will change and lead to better Safari 7 versions in the coming updates. There are also color difference issues…
So I don’t think it has to do with your code at all! Hope this helps a little.
I created a simple CSS transition to rotate a div 360 degrees in this page (the disc menu), but it appears to be working only on Firefox Nightly. I also tried in Firefox 15 (the release build) and Google Chrome. Both only move the image to the left a bit and show some graphical artifacts around the overlying text. This is the CSS related to the disc (the rotating image is actually a empty div with set size inside the real menu div):
#menuDisco {
transition: all 0.8s;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
background: url("img/disco.png");
background-size: 100% 100%;
position: relative;
top: 0%; left: 0%;
width: 100%; height: 100%;
color: rgba(0,0,0,0);
}
#menu:hover #menuDisco {
transition: all 0.8s;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
Make sure to include all the prefixes. Transitions have been unprefixed in FF16 and Opera 12.5. (-ms-transition isn't useful because IE9 doesn't support it and IE10 is unprefixed).
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
You also don't need the transition rule in the second style declaration since it is the same as the first.
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);
}