CODEWITHSUNDEEP
htmlcsstransition
Devilix
Devilix

Reputation: 323

Transition on mouse out is not working

In my scenario, i have try many combinations, but i'm not able to figure out why the transition not work on mouse out. Hope in your helps... Thanks!

CSS:

.wrap_img {
  position: relative;
  width: 300px;
  height: 200px;
  background: #555;
}

.play-icon-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.play-icon-hover i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  color: #fff;
  opacity: 0.7;
  font-size: 90px;
}

.wrap_img:hover .play-icon-hover {
  visibility: visible;
  opacity: 1;
  cursor: pointer;
  z-index: 1;
}

HTML:

<div class="wrap_img">
  <a href="" title="">
    <div class="play-icon-hover">
      <i class="fa fa-play-circle"></i>
    </div>
  </a>
</div>

DEMO: https://jsfiddle.net/L41kgye3/10/

Upvotes: 0

Views: 1677

Answers (2)

Aryan Twanju
Aryan Twanju

Reputation: 2516

The reason your transition is not working on mouseout is that you have used opacity 0.5s ease-in-out in your css whereas you have also used visibility: hidden on your css selector .play-icon-hover. So you need to use transition: all 0.5s ease-in-out. Try this code.

.play-icon-hover {
    position: absolute;
      width: 100%;
    height: 100%;
      opacity: 0;
      transition: all 0.5s ease-in-out;
}

Upvotes: 3

Araz Shamsaddinlouy
Araz Shamsaddinlouy

Reputation: 401

Change to this:

transition: all 0.5s ease-in-out;

Upvotes: 1

Related Questions