I have a menu bar with drop downs that use absolute positioned elements. On hover, the elements fade in using CSS3 transitions. Note, we're using a heavily modified version of Zurb's Foundation 4.
.has-dropdown {
.dropdown {
z-index: 90;
opacity: 0;
transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
&.hover .dropdown {
opacity: 1;
}
}
We have an instance of an OpenSeadragon image, using the html5 <canvas> option on one page, and a YouTube <embed> on another. The YouTube embed has the wmode="Opaque" and &wmode=transparent code on them to force them to respect z-index as outlined here. Both the embed and the canvas and their parent elements are set to z-index: 2; position: relative;
The issue we're running into is that the .dropdown element drops behind the <canvas> and the <embed> once the transition is complete. This seems to happen mostly on Chrome. As soon as we mouse over any of the menu items, the menu pops back in front.
How do we fix this?
Removing the transition fixed the issue. The menu popped right in front of both the canvas and the embed and stayed there.
This didn't solve the issue with having a css transition, though. In order to fix that, I applied a webkit-transform: translate3d(0px, 0px, 0px); to the .dropdown:
.has-dropdown {
.dropdown {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
&.hover .dropdown {
opacity: 1;
}
}
Now I have a transition that appears over the top of the embed and the canvas. Happy days!
Just add z-index to higher number like:
z-index: 1111;
If needed add:
pointer-events: none;
Related
I am using Wordpress, flatsome theme with UX Blocks.
Within a icon box I have a picture and I also have a text box underneath.
The text box contains a hyperlink which animates during mouse over.
I would like the animation to happen with the image icon is hovered over also.
Is there a way of making this happen whilst having them as separate elements?
The animation CSS is similar to:
a.crunchify-link-toright {
position: relative;
}
a.crunchify-link-toright:before {
content: "";
position: absolute;
width: 0;
height: 3px;
bottom: -5px;
left: 0;
background-color: #fff;
visibility: hidden;
transition: all 0.4s ease-in-out;
}
a.crunchify-link-toright:hover:before {
visibility: visible;
width: 100%;
}
and html for the hyperlink of
<h3>LINK<br />
</h3>
Have tried searching for code without success.
I've been browsing the web for quite awhile trying to find a way of making icons move onto the screen (from the left and onto the center of the body div) when you load the page. How can this be done?
This is what I have so far:
CSS3
a#rotator {
text-decoration: none;
padding-right: 20px;
margin-left: 20px;
float: left;
}
a#rotator img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
border-radius:60px;
transition-duration: 1s;
}
a#rotator img:hover {
box-shadow: 0 3px 15px #000;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: translate()
}
If you want a pure CSS solution, you can use the CSS3 animation feature.
You create or declare a animation with the keyword #animation followed by the name you want to give to that animation. Inside the curly brackets you must indicate the keyframes of the animation and what CSS properties will be applied in that keyframe, so the transition between keyframes is done.
You must specify at least two keyframes, the beginning and the end of the animation with the keywords from and to, followed by the properties inside curly brackets. For example:
#keyframes myanimation
{
from {
left: 0;
}
to {
left: 50%;
}
}
Or a example with three keyframes (the percent indicates the percent of the duration):
#keyframes myanimation
{
0% {
left: 0;
}
10% {
left: 50%;
}
100% {
left: 10%;
}
}
Once you have created the animation, you must specify which element you want to animate, it's just the animation property inside the CSS rule that matches the element. Note that the name in the value must match the one that you've created before, and you the duration of the animation. For example:
a#rotator {
animation: myanimation 5s;
}
Here you can specify the duration, number of times that it must be repeated, etc. You can read the full specs here: http://www.w3.org/TR/css3-animations/
Here you can see a working example with the code you've provided: http://jsfiddle.net/mcSL7/1/
I've stopped floating the element and I've assigned it the position absolute, so I can move it in the body with the top and left properties.
This CSS feature is supported by almost every modern browser, even if some of them need the -webkit- vendor prefix. Check it here: http://caniuse.com/#feat=css-animation
Use jQuery
html
<div id="b"> </div>
css
div#b {
position: fixed;
top:40px;
left:0;
width: 40px;
height: 40px;
background: url(http://www.wiredforwords.com/IMAGES/FlyingBee.gif) 0 0 no-repeat;
}
script
var b = function($b,speed){
$b.animate({
"left": "50%"
}, speed);
};
$(function(){
b($("#b"), 5000);
});
see jsfiddle http://jsfiddle.net/vishnurajv/Q4Jsh/
I'm developing this website where I use CSS to style my menu buttons.
They all look good on Windows, but when I try them out on OS X, they render erroneously. What's even more odd is that they show good on a page, but [in my opinion] not so good on another:
Fonts render with a blur around:
Fonts render in "skinny" mode:
Also, I found out that if I hover over an element (ie. logo) that has CSS3 transitions applied on hovering, the blurry rendered fonts become rendered skinny, but when the CSS3 Animation ends, they resume the blurry rendering.
The CSS transitions in cause:
.logo {
float: left;
margin-left: 0px;
-moz-transition: all 0.3s ease-out; /* FF4+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
-webkit-transform: rotate(0deg);
}
.logo:hover {
-moz-transition: all 0.3s ease-out; /* FF4+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
-moz-transform: rotate(-3deg) scale(1); /* FF3.5+ */
-o-transform: rotate(-3deg) scale(1); /* Opera 10.5 */
-webkit-transform: rotate(-3deg) scale(1); /* Saf3.1+, Chrome */
transform: rotate(-3deg) scale(1);
zoom: 1;
}
You can observe this phenomenon live here: http://pote.ca.
Help? Please?
Thanks in advance! :)
UPDATE:
I am using verdana for the menu items, and another font for the // bun venit message.
Another example of fonts rendered that do not look good is the menu on Google's Analytics page:
That's not rendered "badly", it uses an overall different font rendering strategy than Windows. OS X tends to preserve the original shape of the character better, while Windows attempts to shove characters into a pixel grid. The results look different, not "worse". And yes, you need to take this into account as part of your design.
For reference, see A Closer Look At Font Rendering, Coding Horror: What's Wrong With Apple's Font Rendering? etc.
Can anyone let me know why my element will not fade in?
The background image properly animates, but the .home class just appears rather than fading in?
Thanks, code snippet is below.
#home {
width:35px;
height:35px;
float:left;
margin:20px 20px 0 20px;
transition:background-position .2s ease;
-webkit-transition: background-position .2s ease;
-moz-transition: background-position .2s ease;
background-image:url('images/icons.png');
}
#home > .home {
position:absolute;
display:none;
margin-top:40px;
opacity:0;
transition:opacity 3s linear;
}
#home:hover > .home {
display:block;
opacity:1;
}
#home:hover {
background-position:0px 35px;
}
<!-- END STYLE START HTML -->
<div id="home"><div class="home">HOME</div></div>
Add transition on hover as well.
#home:hover > .home {
display:block;
opacity:1;
transition:opacity 3s linear;
}
For cross-browsing transition add:
-moz-transition ...
-webkit-transition ...
-o-transition ...
-ms- is not supported.
From W3Schools: "The transition property is not supported in any browsers.". Instead, use the specific transition properties for Firefox, Chrome, Safari and Opera: http://www.w3schools.com/cssref/css3_pr_transition.asp
IE does not support this at all.
If you want real working transitions, you should consider using a javascript library that supports animations like JQuery.
I wonder If anybody knows a clever and new way how to make a transition between two background images? I know there are multiple tutorials out there just most of them are outdated and old.
I wonder if there is a clever and modern CSS3 way of doing something like this.
I have a simple logo.png set as background to a div.logo (I want it to be set as a background image not via img src). And when I hover over it I want a smooth transition to "logo-hover.png" which is the same file just in a different color.
Any ideas how to do this nowadays?
My approach would be this:
- I create a outer container around div.logo wich position relative. I position two divs inside of it with position absolute on top of each other. The div.hover is set to display:none and if I hover it I use css3 transition to animate it's opacity.
Is this the only way of doing this?
I'd actually love to use a pure css way where I don't have to add an additional div with the hover state to the dom itself.
Any ideas on that matter?
Thank you in advance.
use this
#home .stripes, #home .stripes:hover a {
text-indent: -9999px;
width: 116px;
height: 128px;
margin: 50px 0px 0px 56px;
float:left;
padding: 0;
background:url('http://www.clipartpal.com/_thumbs/024/christmas/christmas_024_02_tns.png');
}
#home .stripes a {
background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
#home .stripes a:hover, #home .stripes a:focus {
background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
opacity: 0;
}
and
I actually just came up with a solution for this myself.
I wanted a way to have an image appear to work as if it was a sprite, but keep it super simple.
HTML:
<div class="facebookicon">
<img src="http://example.com/some.png">
</div>
CSS:
.facebookicon img {
background: #fff;
transition: background 400ms ease-out;
}
.facebookicon img:hover {
background: #3CC;
transition: background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */
You can see it here:
http://jsfiddle.net/mattmagi/MpxBd/
I think this is what you want:
DEMO.
Basically it's using transitions like you said:
CSS markup:
.imagesTest {
position:relative;
height:200px;
width:300px;
}
.imagesTest img {
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.imagesTest img.top:hover {
opacity:0;
}
HTML markup:
<div class="imagesTest">
<img class="bottom" src="some/image" />
<img class="transition" src="some/image" />
</div>
For more information, check more examples here