Необычное увеличение изображения при наведении курсора, на ваш Блогспот, Блоггер


Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)

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

Плавное увеличении картинки при наведении курсора



или

Панорамное увеличении картинки при наведении курсора



Сегодня я публикую еще один вариант. Наведите курсор и опробуйте эффект:



Увеличенная картинка Увеличенная картинка


Если эффект вам понравился, то данный виджет можно использовать, вставив код в редактор в любом месте статьи.

<style>
.dsblockzoom{
position: relative;
}
.dsblockzoom img{
position: absolute;
left: 0;
}
.dsblockzoom img.maximg{
opacity: 0;
visibility: hidden;
}
.dsblockzoom img.minimg{
z-index: 1;
}
@-webkit-keyframes dszooma{ 0%{
z-index: -1;
opacity: 0;
}
50%{
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{
z-index: 2;
}
100%{
left: 0;
box-shadow: 8px 8px 15px gray;
}
}
@-moz-keyframes dszooma{
0%{
z-index:-1;
opacity:0;
}50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
@-ms-keyframes dszooma{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
.dsblockzoom:hover img.maximg{
-webkit-animation-name:dszooma;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-name:dszooma;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-ms-animation-name:dszooma;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;
animation-name:dszooma;
animation-duration: 1s;
animation-iteration-count: 1;
visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;
z-index:2;
}
.dsblockzoom:hover img.minimg{
opacity:0.5;
}
</style>
<div class="dsblockzoom" style="width:300px; height:171px">
<img class="minimg" src="http://delaisait.ucoz.ru/script/menu/img/1/esizbr1.jpg" alt="zoom effect" />
<img class="maximg" src="http://delaisait.ucoz.ru/script/menu/img/1/esizbr.jpg" alt="zoom effect" />
</div>


Выделенные красным урл. - адрес ваших изображений (изображения должны иметь разный размер, вначале маленький потом большой), вставляете по вашему усмотрению!

12 коммент.:

блог Татьяны Коноваловой
Justus
стихи
Максим Волченко
Анна
Justus
Максим Волченко
Andrey a
Justus
Andrey a
Justus
тимур

Отправить комментарий

Дорогие Друзья! К сожалению, временно, по причине здоровья, моя активность по этому блогу ВРЕМЕННО ПРИОСТАНОВЛЕНА! Предположительно до января 2018 г.

Доска почета

Плюсани блог!