Transition Only on Hover-In

How to show CSS transitions only on hover?

As you commented, if you want to prevent transition while the background-color is changed using button, the way to do is, to use transition on the :hover block

#transition:hover {
    background-color: #ADE1E1;
    transition: .5s background-color;
    -webkit-transition: .5s background-color;
    -moz-transition: .5s background-color;
}

Demo 2 (background-color won't change though, read ahead)

Note: Anyways you will need the below solution as well, else your
background-color won't be changed

Demo 3 (If you care to :hover even after changing the background-color using jQuery)

---

That is because jQuery adds inline CSS which has highest preference/most specific and hence, :hover background-color won't be respected, you will have to use !important in this case

Demo

#transition:hover {
    background-color: #ADE1E1 !important;
}

---

Or else, it would be better, if you prefer adding and removing class using jQuery, instead of using .css() method, than you won't require !important as well.

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>

Can I apply a CSS transition on hover-out only?

Here's one way to achieve this (put a bogus property none for transition property in :hover):

#inner2{
    opacity:0;
    transition:opacity 2000ms;
}
#outer:hover #inner2{
    opacity:1;
    transition:none;
}

http://jsfiddle.net/j716sbav/4/

Answer updated to incorporate @BoltClock's suggestion. Putting none instead of a bogus property is definitely more elegant.

CSS Img resize transition time only on hover

You could set the transition on your image only when the window is hovered. This way, on resize it won't affect your element anymore, but on your element's hover and mouseout it will still be active.

/* when hovering the page */:hover .row .column img {  transition: 0.6s ease;}
.row .column img {  background: #000000;  width: 100%;  filter: brightness(0.8);  height: calc(80vh - 10px);  /*  transition: 0.6s ease; [removed]*/}
.row .column:hover img {  /*  transition: 0.6s ease; [useless]*/  width: 110%;  cursor: pointer;  transform: translate(-5%, -5%);  filter: brightness(0.5);  height: calc(80vh - 10px);}
.column {  float: left;  position: relative;  text-align: center;  width: 50%;  padding: 0px;  overflow: hidden;  height: calc(60vh - 10px);}

<div class="row">  <div class="column">    <a href="---.html">      <img src="https://picsum.photos/300/100/?random">      <div class="centered">1</div>    </a>  </div>  <div class="column">    <a href="---.html">      <img src="https://picsum.photos/300/100/?random" />      <div class="centered">2</div>    </a>  </div></div>

Transition delay only on hover out

You can try

div::before {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: .5s ease-in-out 1s;
}

div:hover::before {
  opacity: 1;
  transition: .0s ease-in-out 0s; 
}

It will have transition delay only on hover-out

CSS ONLY Hover over button animate, hover out animate

It's possible without animations. Just use transform.

Example:

button{
    transform: scale(1);
    transition: transform ease 1s;
} 

button:hover{
    transform: scale(0.89);
}

Apply transitions on :hover not :active

a {
    background-color: white;
    transition: all 1s;
}

a:hover {
    background-color: grey;
}

a:active {
    background-color: black;
    transition: none;
}

markup:

<menu type=list>
    <li><a>home</a></li>
    <li><a>work</a></li>
    <li><a>contact</a></li>
    <li><a>about</a></li>
</menu>

demo: http://jsfiddle.net/7nwLF/

How do I have both :hover and transition-delay?

First of all, you need to put your transition setting on both button and button:hover, if you want different delay values on hover and mouseout.

Secondly, if you want to have a transition on a property such as width, it works better if you specify its initial value on button.

And finally, you can achieve the desired result by using the ::after pseudo-element :

Your HTML

<button>click me</button>

Your CSS

button {
  padding: 12px;
  border-radius: 50%;
  margin-bottom: 2em;
  position: relative;
  transition-delay: 0s;
  background-color: #6272a4;
  width: 100px;
}

button::after {
  content:"test";
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  padding: 12px;
  border-radius: 50%;
  background-color: red;
}

button:hover::after  {
  display: none;
}

button:hover  {
  background-color: #000000;
  width: 250px;
  transition-delay: 2s;
  color: red;
}

You can add transition time and ease if you want to.

---

Related Topics