Это обычный и не красивый переход. Нужно плавное увеличение и первый плавно исчезает.
Если брать по отдельности, есть плавный переход
.image-block {
display: inline-block;
padding: 0;
margin: 0;
background-position: center center;
background-repeat: no-repeat;
}
.image-up, .image-down {
border: 0;
margin: 0;
padding: 0;
}
.image-up {
opacity: 1.0;
filter: alpha(opacity=99); /* IE */
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; /* IE9+ */
}
.image-up:hover {
opacity: 0.00;
filter: alpha(opacity=00); /* IE */
}
<div class="image-block">
<img class="image-up" src="../images/первое_изображение.jpg" />
<img class="image-down" src="../images/второе_изображение.jpg />
</div>
а также плавное увеличение:
#container{
text-align: center;
position: absolute;
left: 240px;
margin-top: 150px;
width: 790px;
}
.img{
position: fixed;
z-index: 0;
}
.end{
margin-right: 0;
}
.clear{
clear: both;
}
.img a img{
position: relative;
border: 0 solid #fff;
}
$(document).ready(function() {
var cont_left = $("#container").position().left;
$("a img").hover(function() {
// приближение
$(this).parent().parent().css("z-index", 1);
$(this).animate({
height: "250",
width: "250",
left: "-=50",
top: "-=50"
}, "fast");
}, function() {
// отдаление
$(this).parent().parent().css("z-index", 0);
$(this).animate({
height: "150",
width: "150",
left: "+=50",
top: "+=50"
}, "fast");
});<p></p>
$(".img").each(function(index) {
var left = (index * 160) + cont_left;
$(this).css("left", left + "px");
});
});
всё делается только по отдельности, а как совместить, чтобы происходило и плавная смена и плавное увеличение вместе?
