Как сделать плавную замену изображения?

Question

[Михаил Иванов]

Как сделать замену , я знаю, и как плавно это сделать тоже , но проблема в том что если картинка jpg то все нормально работает , а если png то из под 1 картинки видна вторая , а надо что бы 2 не видно было , и когда на первую наводишь вторая плавно появлялось, и когда курсор уводишь то появляется первая тоже плавно ))) Как то так )

Comments

[Zombie42679]

Есть пример?
- Добавить к картинке белый фон ?
- Убрать первую быстрее, чем начнется появляться вторая?

[Михаил Иванов]

<div class=ImgField>
<img class="image first" src="images/one.png"/>
<img class="image second" src="images/two_hover.png"/>
</div>
</div>
          </a>

.image.first,.image.second {
border:2px solid transparent;
margin:0;
padding:0;
margin-left: 11px;
}

.image.first {
opacity:1px;
display:block;
position:absolute;
z-index:100;
transition-duration:0.96s;
-webkit-transition-duration:0.96s;
-moz-transition-duration:0.96s;
-o-transition-duration:0.96s;
-ms-transition-duration:0.96s;
}

.image.first:hover {
opacity:0.00;
}
 
div.ImgField {
display:inline-block;
background-position:center center;
background-repeat:no-repeat;
margin:0;
padding:0;
}

Answer 1

[Дмитрий Гаджиев]

а если png то из под 1 картинки видна вторая , а надо что бы 2 не видно было

Наверное потому что PNG поддерживает прозрачность? Капитан Очевидность)

Comments

[Михаил Иванов]

Ну да а я то не знал что png прозрачный фон содержит ))

[Дмитрий Гаджиев]

Михаил Иванов, ну если у вас с JPG нормально работает, а с PNG нет, откуда можно понять знали вы это или нет?