CSS Transition - Fade Element on Hover Only

CSS Transition - Fade Element on Hover only

Yes, you can achieve this using CSS3 transitions. Essentially, your CSS should look like this:

#myLink {
    opacity: 0;
}

#myLink:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

And here's a jsFiddle to demonstrate: Fiddle

CSS animation, fade in background on hover, stay, and go back to previous after a delay

I think you may have complicated things by using animation when a transition would have been the better option. Animations have a start and end point (the 0% and 100% keyframes) so when you hover-in or out, the element is first set to the state as at the 0% keyframe (since animation direction is normal) and then proceeds to the 100% keyframe. When you hover-in or out quickly (before previous animation is complete) you'd always see these jumps because of the setting of 0% keyframe's props.

The below should be what you need:

div {

  width: 100px;

  height: 100px;

  background: rgba(50, 60, 95, 0.3);

  transition-property: background;

  transition-duration: 1s;

  transition-delay: 2s;

}

div:hover {

  background: rgba(50, 60, 95, 1);

  transition-delay: 0s;

}

<div></div>

Hide/show toggle on hover with fade in css

You can use max-height to remove the unwanted space

See code snippet bellow:

#stuff {

  opacity: 0.0;

  -webkit-transition: all 400ms ease-in-out;

  -moz-transition: all 400ms ease-in-out;

  -ms-transition: all 400ms ease-in-out;

  -o-transition: all 400ms ease-in-out;

  transition: all 400ms ease-in-out;

  color: black;

  text-align: center;

  border-style: solid;

  border-width: 1px;

  border-color: #e0e0e0;

  border-radius: 25px;

  width: 200px;

  max-height:0;

}

#hover {

  width: 150px;

  height: 10px;

  margin-bottom: 15px;

  cursor: pointer;

  float: center;

  font-family: 'Open Sans', FontAwesome;

  font-weight: 600;

}

#hover:hover+#stuff {

  opacity: 1.0;

  max-height:100%;

  

}

<div id="hover">HOVER HERE</div>

<div id="stuff">Revealed text</div>

Transition only on hover-in

In this case add the transition to hover.

Why?

Because when you hover you will add the transition and change the opacity so the transition property is set and thus it will work. When your mouse leave the element you suddenly remove the transition so it is no more specified and thus no more transition.

.hello {

  opacity: 0;

  font-size:35px;

}

.hello:hover {

  opacity: 1;

  transition: all 1s ease 0s;

}

<div class="hello">

  Hello

</div>

How to Fade out with CSS Transition (Managed to fade in, but don't understand how to fade out without Webkit)

add this

.image p {
    transition: .5s ease-out
}

CSS3 fade in, pause, fade out on hover

You can add transition-delay: 1s; to the fade out transition.

Like this - Demo

Fade in border on hover

When an element has no border, then you add on hover you face a few issues such as page moving, drawing border from scratch etc

Solution: Try setting border to transparent first, so it's there but cannot be seen:

a { 

    border-bottom: 2px solid transparent; /* <- here */

    transition: border-bottom 1s;

    text-decoration: none; /* I added this for clarity of effect */

}

a:hover {

    border-bottom: 2px solid red;

}

<a href="">testing border</a>

Fade in/out element on parent div hover with css

You can use transition and opacity to make it work for you, as opacity is transitionable and also gives the same effect, without leaving the DOM:

#cslider {

  padding: 50px;

  text-align: center;

}

#cslider a {

  opacity: 0.25;

  transition: opacity .25s ease-in-out;

  -moz-transition: opacity .25s ease-in-out;

  -webkit-transition: opacity .25s ease-in-out;

}

#cslider:hover a {

  opacity: 1;

}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div id="cslider">

  <a href="javascript:;" class="control_next"><i class="fa fa-arrow-right"></i></a>

  <a href="javascript:;" class="control_prev"><i class="fa fa-arrow-left"></i></a>

</div>

---

Related Topics