CSS : Image hover transition not working with display none / display:block and image swap

Question

I want to add a simple blend-in image transition for mouse hover. The hover itself works fine. If I remove the display:none , the transition will work, but the hover image swap will fall apart. Any ideas how to fix that ?

Here is the CSS that I used:

div.effect img.image{


opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
    display:block;
}
div:hover.effect img.image{
  opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;

display:none;
}
div.effect img.hover{
  opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
  display:none;

}
div:hover.effect img.hover{     
display:block;

 opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}

And here is the live (not working) demo to play with: http://jsfiddle.net/46AKc/65/

Answer 1

Assuming all the images are the same height, you could set a fixed height on the parent element and then relatively position it.

.effect {
    position:relative;
    height:94px;
}

Absolutely positioning the img elements and remove display:none.

div.effect img.image {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    position:absolute;
}

The reason this works is because the child img elements are absolutely positioned relative to the parents, effectively positioning both images on top of each other. You no longer need to change the display of the element, thus allowing the transition to take place.

UPDATED EXAMPLE HERE

---

Alternatively, if the images aren't all the same height, omit the height, but still relatively position the parent element. As opposed to absolutely positioning both images, just position one and it will still work.

ALTERNATIVE EXAMPLE HERE

div.effect img.hover {
    opacity: 0;
    position:absolute;
    top:0;
}

It's also worth noting that you don't need to include the transition properties on all the elements if they have the same values. Having it on the div.effect img.image will suffice.

Take a look at this example.