CODEWITHSUNDEEP
htmlcss
Luke Bennett
Luke Bennett

Reputation: 43

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

I have tried searching for this but cannot find it. I have created a class which when hovered over the pararaph element zooms in and decreases opacity. I have use a transition on this of (.5s). This works really well. However I have seen (I watched a video) that you can create a transition for after the hover. I have been trying to use: 

image:hover:after p {
  transition: .5s;
}

But it is not working. I do not understand these webkit options. And I have seen this done without the use of webkit. Basically, is it possible without webkit? Or is it my imagination?

If webkit is the only way could someone link me to some AWESOME tutorials.

This is what I currently have in my stylesheet :

.image p {
  color: black;
  font-weight: bold;
  background: rgba(235, 229, 235, .3);
}


.image:hover p {
  background: rgba(235, 229, 235, .9);
  transition: 0.5s;
  font-size: 110%;
}

Thanks,

Luke

Upvotes: 0

Views: 5838

Answers (3)

Nathan
Nathan

Reputation: 66

add this 

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

Upvotes: 1

kashinath Chormale
kashinath Chormale

Reputation: 9

.image p a {
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
.image p a:hover {
  -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
}
<div class="image">
  <p><a>fade in fade out effect on hover element</a> </p>
</div>

Upvotes: 1

Paul
Paul

Reputation: 1091

Try moving the transition property to the normal selector not the hover; Otherwise the transition effect will only applied when you're hovered over not moused out..

e.g. 

.image p {
  color: black;
  font-weight: bold;
  background: rgba(235, 229, 235, .3);
  transition: 0.5s;
}


.image:hover p {
  background: rgba(235, 229, 235, .9);
  font-size: 110%;
}

Upvotes: 0

Related Questions