For an artist's web site, where the pictures completely fill the browser window, I want to show a strip of thumbnails which will disappear to leave only the thumbnail for the current image in the corner. When you roll the mouse over this thumbnail, the strip of thumbnails should reappear again, so that you can choose a new picture.
I've included a mockup of this effect below, and a jsFiddle where you can see this in action.
If you roll the mouse over the thumbnail and then quickly off again, the animation will stop, remain in a paused state for 1 second, and then reverse. How should I alter the CSS so that the slide out animation will always play to the end once it has started?
<html>
<head>
<style>
html, body {
height: 100%;
margin:0;
overflow: hidden;
}
div {
position:absolute;
left:0;
width: 100px
}
#cue, #thumb {
bottom:0;
height:50px;
}
#cue, #thumb {
bottom:0;
height:50px;
}
#cue {
background: none;
opacity: 0.2;
z-index: 2;
}
#thumb {
background: blue;
opacity: 0.5;
}
#strip {
background: blue;
opacity: 0.2;
z-index:1;
height: 99%;
top: 100%;
-webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
#cue:hover + #strip, #strip:hover {
top: 1%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
#thumb {
-webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-webkit-transition-delay: 1200ms;
transition-delay: 1200ms;
}
#cue:hover ~ #thumb, #strip:hover+#thumb {
opacity: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
</style>
</head>
<div id="cue"></div>
<div id="strip"></div>
<div id="thumb"></div>
</html>
I'm not sure how you can do this without JavaScript. You can toggle classes instead of using hover selector and use transitionend to detect when the animation has completed to toggle the hover classes.