Bi-Directional CSS Transitions - html

I'm using vendor prefixed css transitions, based on this demo, which seems to only be working in Chrome 22+ at the moment. I'm trying to turn the buttons (Home, Contact, About) into drop-down menus on hover. I want to avoid using javascript and see if I can do it all with CSS.
It fades in if I have the z-index set to a low number (-999) and on hover change it to a high number (999), and change the opacity from 0 to 1 using a transition.
nav > div div {
z-index: -999;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
}
nav > div:hover div {
z-index: 999;
opacity: 1;
}
See the Fiddle here.
The problem is it won't fade back out. If I change the transition to also delay the z-index from changing then it will fade out, but not in (-webkit-transition: opacity 1s ease-in-out, z-index 0 linear 1s). Modifications to the Fiddle here.
Essentially what's going on is the opacity fading works fine, but z-index moves too quickly in either one direction or the other. If I don't use z-index at all, then it will open the menu when I'm hovering below the "Hover Me" button instead of on it. Here's another Fiddle showing that scenario.
Is there a way to have one transition for going from point A to point B, and another transition for going from point B to point A? I've played around with putting a separate transition on the :hover element but as far as I can tell it just overrides the first one (as if there is no transition from "not hovering" to "hovering").
TL;DR: Is there a way to modify this, this, or this to make a smooth transition when hovering on (not just near) the "Hover Me" button (without using javascript)?

Check out this Fiddle. Not sure if it does what you want, but I changed the following...
CSS
nav > div > div {
z-index: -999;
position: absolute;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
-moz-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
-ms-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
-o-transition: opacity 1s ease-in-out, z-index 0 linear 1s;
}
nav > div:hover > div {
z-index: 999;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out, z-index 0 linear 0;
-moz-transition: opacity 1s ease-in-out, z-index 0 linear 0;
-ms-transition: opacity 1s ease-in-out, z-index 0 linear 0;
-o-transition: opacity 1s ease-in-out, z-index 0 linear 0;
}
I've added transitions to the hover state as well, but with a delay of 0.

Related

CSS animation on after element doesn't appear to do anything?

I believe it's possible to add css to pseudo elements in CSS even though it is a working draft currently.
However, upon trying in the latest version of Chrome I can't seem to get it working.
I want the :after element on my header to transition in instead of looking so blocky.
I have added the transition to my after element but it's still the same, have I specified the CSS as below;
#main-header:after {
height: 95px;
content: " ";
width: 100%;
left: 0;
position: absolute;
background: url(http://stbenedicts.justinternetdns.co.uk/wp-content/uploads/2016/07/waves-test-1.png) top center;
z-index: 1;
top: 144px;
}
#main-header.et-fixed-header:after {
-webkit-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
-moz-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
top: 54px;
}
So that when scrolled, the after element should ease in and not be one solid movement.
Any advice?
EDIT: http://stbenedicts.justinternetdns.co.uk/ <- playground
I'm working on the assumption that the transition(s) are supposed to take place when the .et-fixed-header is added.
But what are you transitioning?
transition:
background-color 0.4s,
color 0.4s,
transform 0.4s,
opacity 0.4s ease-in-out;
But from what to what?
You aren't setting initial values for those properties or end values.
The only thing you are changing (except the background, kinda) is the top value and you aren't transitioning that at all.
So you would need to set actual values on your #main-header rule to start with and new different values on your #main-header.et-fixed-header rule
Try setting the transition properties (-webkit-transition, -moz-transition, transition) on the base class (#main-header:after).
#main-header:after {
height: 95px;
content: " ";
width: 100%;
left: 0;
position: absolute;
background: url(http://stbenedicts.justinternetdns.co.uk/wp-content/uploads/2016/07/waves-test-1.png) top center;
z-index: 1;
top: 144px;
-webkit-transition: all 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
-moz-transition: all 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
transition: all 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
}
#main-header.et-fixed-header:after {
top: 54px;
}
By defining the transition on the base class the browser knows to transition when the modified condition — the addition, presumably, of et-fixed-header in your example — occurs. Otherwise, it only applies the transition properties to the class when that condition is present; meaning that you would only see the transition if/when that modifier is removed. This article does a far better job of explaining it.
EDIT: I hadn't noticed you were only specifying background-color for your transition property. In addition to moving the transition properties to the base class, you'll have to either add the other properties (the syntax is explained here, or broadly transition all properties

When I hover over an image and use the z-index property, the image flickers?

I'm not super super great with html but I've been able to make my way into some coding and so far, this is the only issue I can't understand nor fix.
I have one big image but under the image are text boxes, links, and other images. I can get the image to where if I hover my mouse over it, I can see the stuff under it perfectly, but I can't scroll textboxes nor can I click my links.
I tried setting the z-index to -9 but which works...if I keep my mouse still. (Pointless.) If i move my mouse, the image flickers with ever movement. Any fixes? Here is the issue. I apologize for the messy code.
#aesth {
position:fixed;
top:150px;
left:90px;
width:432px;
height:600px;
background: url('https://38.media.tumblr.com/5f5348ef9ed5ca32ffb42a153032b6d3/tumblr_n83taak4Bj1tvcp5qo1_500.png'), #fff;
z-index:9;
}
#aesth:hover {
z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
The hover problem was faced due to the z-index=-9 given in the
#aesth:hover {
z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
Just Remove the z-index inside the #aesth:hover it work fine
The problem there is that when you hover the image, it fades and goes behind. When it goes behind, it comes back to the initial state because it is not hovered this time but the other content.
Trying targeting the parent on hover then apply the effect to the image. This way the hover effect remains because the target is not moved away from the mouse pointer.
parent:hover > #aesth{
z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}

Resizing nav menu PNGs on screen resize

I have a nav bar made up of png icons. When resizing a page or displaying on other windows, the icons do not move so get cut off. I cannot find a way to resize the icons on different screens and make the icons white on hover? I know as they are .png’s I may have to create all of the icons in white aswell?
Anyway you can see it live at http://www.ssangar.com/
Here is my code for the nav:
http://cdpn.io/msjzi
Thanks in advance!
I'm not quite sure if I understand your question 100%, but just as Racil put it, you want to create a css, and set it to a percentage or with pixels...
If you want to add some transformations, I use this code on my website:
nav li a:hover, nav li a.current {
color: #0099CC;
-o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
transition: background 0.3s linear 0s, color 0.3s linear 0s;}
The reasoning behind all the different transitions is for the all the old browsers that do not accept the transition code.
*Note: You will need to supply more nav info in your css code, the above is to only make it have a transition effect..*
Depending on what you're trying to achieve, instead of creating another set of icons in white, you probably can use opacity alpha layer. Check this tutorial. Here are the basics:
.myMenuItem:hover
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
As for the resizing, you can simply set the size to percentage:
.myMenuItem
{
width: 30%;
height: 20%;
}
You can also use transition or transform to add some effects:
transform: scale(.5);
transition:width 0.5s ease;

CSS Transition not working properly

I have the following code: http://jsfiddle.net/8TG8L/
On another part of my HTML I can get the transition CSS to work great, but here on the right hand side I cannot get the transition to have any delay.
Relevant code:
.home_subvid_hover {
background-image:url('http://www.ptroa.com/images/video_hover.png');
/*background-repeat:no-repeat;*/
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
EDIT:
To clarify, please look at this code: http://jsfiddle.net/9UuY7/
That one works although it's the same principle as the first one, why is that?
Thanks,
The reason the background isn't animated, is because the backround-image isn't set on the initial class .home_subvid.
You can't animate background-image:none to background-image:url(...).
If you try this, it's gonna work:
.home_subvid {
background-image:url('http://placehold.it/1x1/000');
background-size: cover;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.home_subvid:hover {
background-image:url('http://www.ptroa.com/images/video_hover.png');
/*background-repeat:no-repeat;*/
}
FIDDLE.
You can't transition background images from none to an image, see this document on MDN. Transitioning from image to image doesn't have amazing browser support either; as far as I know it's only supported in Chrome.
You can, however, create a similar effect with different markup/CSS.
How about an element made invisible with opacity: 0; and then transitioned into opacity: 1; when hovered?
Your css is changing the background image from nothing to an image, which the current generation of CSS can't animate.

Trouble adding css transformation to background images

I'm creating a simple web page and I'm having trouble adding a fade animation to the css when the background image is changed. I know I need to use something along these lines but whenever I try it, it doesn't seem to work...
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
I'll put a link to my css and html below, if anyone could take a look, I would be very grateful :)
CSS: http://pastebin.com/9k1tSiAE
HTML: http://pastebin.com/2K7GFWjN
The problem is you are changing the background image in addition to simply changing properties on the background itself. I've setup a fiddle with some random background tiles. You'll see the background slides but the image changes immediately without a transition:
http://jsfiddle.net/jimjeffers/a2jAF/
You'll need to settle on one image for the background but right now you have three:
background-image:url(nav-bg-initial.png);
background-image:url(nav-bg-secondry.png);
background-image:url(nav-bg-tertiary.png);
You'd need to condense those into one sprite. But once you apply a transition to background and adjust the background position, the background slides rather than fades. So depending on the effect you're going for - transitioning the background may not be the best option for you.
Instead -- what you may need to do is use some nested empty container elements. It's not semantically nice but it could achieve what you want if you want to use CSS transitions to perform a cross fade.
<ul id="navigation-list">
<li><a class="navigation-button" id="nav-button-1" href="#">HOME</a><span class="initial"></span><span class="secondary"></span><span class="tertiary"></span></li>
...
</ul>
The CSS then would be:
.navigation-button { position: relative; }
.initial, .secondary, .tertiary {
bottom: 0;
left: 0;
opacity: 0;
position: absolute
right: 0;
top: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
z-index: -1;
}
.initial { background-image:url(nav-bg-initial.png); }
.secondary { background-image:url(nav-bg-secondry.png); z-index: -2; }
.tertiary { background-image:url(nav-bg-tertiary.png); z-index: -3; }
And then you'd toggle their appearances like this:
#navigation-buttons:hover #nav-button-1 .tertiary { opacity: 1; }
It's a bit more work but you'd have to do something along those lines to cross fade different background images at various positions without getting a slide effect.