Mouse Hover 시 이미지 교체하면서 Transition 효과 주기

bootstrap 라이브러리를 사용하면서 마우스 hover 시 image를 교체하면서 Transition 효과를 주는 법

<div class="col-sm-3">

<div class="c-fadeimg">

<a th:href="@{/page/request}">

<img class="c-bottom" th:src="@{/image/main/request-hover.png}"  />

<img class="c-top"    th:src="@{/image/main/request.png}" />

</a>

</div>

</div>

.c-fadeimg {

position: relative;

}

.c-fadeimg img {

transition: opacity .25s ease-in-out;

cursor: pointer;

}

.c-fadeimg img.c-top {

position: absolute;

left: 0;

top: 0;

}

.c-fadeimg img.c-top:hover {

opacity: 0;

}

Chrome 이랑 Opera 브라우저에서는 이미지가 교체되면서 1 픽셀 정도 움직여서 눈에 좀 거슬린다.

FireFox 에서는 이런 문제가 없었다.

IE9 와 PC용 Safari 브라우저에서는 Transition 이 작동되지를 않고, 이미지가 교체되면서 1픽셀이 커졌다 작아지는 현상도 없었다.