CODEWITHSUNDEEP
htmlcss
vuvu
vuvu

Reputation: 5328

CSS - Gradient transition on hover does work both ways

On hover I want to fade in a gradient. I works fine, but on mouse leave there is no transition back. What is wrong, how can I improve the code?

jsfiddle

HTML

<header class="parent">
Hover here!
    <div class="child"></div>


</header>

CSS

.child {
  height: 100px;
   position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
      opacity: 0;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  /* Opera */
  transition: all 1s ease-out;
  /* Standard */ }



.parent {
    height: 120px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100; 
      opacity: 1 !important; }


  .parent:hover .child {
    opacity: 1;
    background: -moz-linear-gradient(top, #ededed 0%, #ededed 30%, rgba(237, 237, 237, 0) 99%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-    stop(30%, #ededed), color-stop(99%, rgba(237, 237, 237, 0)));

Upvotes: 1

Views: 795

Answers (2)

vishnu
vishnu

Reputation: 634

You have added the bg-gradient to child on hovering only.
Move the background css property to child{ /* background property */ } at default state(mouse leave)

It works good here http://jsfiddle.net/nvishnu/4paLf352/16/

Upvotes: 1

SW4
SW4

Reputation: 71150

Simply move your background out of the :hover state, onto the .child directly- seeing as you are only animating the opacity of .child this is all that is required. The reason it isnt working at present is also due to the fact you are only listing a single background state, that for hover- when you arent hovering the parent, the background is immediately removed (as no default is present) although the opacity is transitioning- so you see the 'jump'

Demo Fiddle

Upvotes: 4

Related Questions