how can I make transition effect

Question

I need help for transition effect. I have code block and I want to add hover transition effect. How can I do it?

.mockup img {
  cursor: pointer;
}

.mockup img:last-child {
  display: none;
}

.mockup:hover img:first-child {
  display: none;
}

.mockup:hover img:last-child {
  display: inline-block;
}

<div class="row">
  <div class="col-lg-8 mx-auto mockup">
    <img src="http://lorempixel.com/output/animals-q-c-640-480-9.jpg">
    <img src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg">
  </div>
</div>

You can't transition `display`, if that's what you're asking. — jhpratt, Dec 30 '17 at 04:29
I want to change animation speed when mouse hovers on picture. I mean it should be visible slowly — atomant, Dec 30 '17 at 08:33
Possible duplicate of [Transitions on the display: property](https://stackoverflow.com/questions/3331353/transitions-on-the-display-property) — Temani Afif, Dec 30 '17 at 08:42
If you want to fade between two images, use only the `opacity` property. Ignore the `visibility` in the linked question's answer. — Mr Lister, Dec 30 '17 at 09:44

score 0 · Answer 1 · answered Dec 30 '17 at 10:12

0

Unfortunately you cannot add transition to display property, but you can replace it with opacity or visibility

So your code can be replaced with:

.mockup img {
    cursor: pointer;
    transition: all 0.3s ease;
}

.mockup img:last-child {
    opacity: 0;
    visibility: hidden;
}

.mockup:hover img:first-child {
    opacity: 0;
    visibility: hidden;
}

.mockup:hover img:last-child {
    opacity: 1;
    visibility: visible;
}

answered Dec 30 '17 at 10:12

d3vma

161
2
10

Thanks for the answer but not suitable for me. Also doesn't work – atomant Dec 30 '17 at 10:30
1

@atomant Then you should explain better what you want. If Mohamed's answer won't do if for you, and none of the dozens of answers to the linked question apply to your problem, then obviously your problem is different than we think. – Mr Lister Dec 30 '17 at 12:42

how can I make transition effect

1 Answers1