CSS Transitions, overflow:hidden issue in a dropdown menu preventing next level submenu from showing

First post so bear with me. I have a multilevel dropdown menu and have added a height transition to give the dropdown a cool scroll effect. Problem is that for some reason the transition only works properly if the overflow on the hidden ul is also hidden. this wouldn't be a problem if I didn't have yet another level of submenu. With overflow:hidden; on the parent ul, you can't see the nested ul that is offset to the right exactly the width of the parent. If I make overflow:visible; in the hover rule-set, then I lose the beginning transition and only get the effect when stop hovering.

Pure CSS Slideshow with transform fadein fadeout effects

I'm not able to make the transition of this slideshow to work with buttons, do you know how I could do?

I have this live example jsfiddle with this HTML:

<!DOCTYPE html>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
   <label for="button-1" class="button-label-1"></label>

Transitions Opacity Help


Started to experiment on CSS3 transitions and if you look into the 1st image under products page, it has a mouseover fadein effect.

How can i have the black background stay %80 opacity when it fades in and the

element (available) %100?

One last thing, is there any way to vertically align the

element in the middle without using "line-height" property?

thanks in advance


Making a "push" CSS gallery

I want to make a CSS image gallery/slideshow, which uses a sort of "push" transition — a bit like frames on a strip of film. After getting to the last image, the animation would restart the cycle by returning to the first image. Is it possible to do this using CSS3? What if I want the transitions timed?

Syndicate content