Плавное увеличении картинки при наведении курсора, с использованием CSS и jQuery для Блогспот, Blogger


Пост (в основном) для пользователей:

Опять в моем HTML редакторе (в результате экспериментов) получилась готовая, интересная заготовка для ВАС! Речь идет об увеличении картинки после наведения курсора. Этот вариант с использованием CSS и jQuery и я бы сказал более эффективный, чем только CSS! Публикую код одним блоком, который вставляется в ваш HTML редактор и ГОТОВО! © blogodel.com  

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style type="text/css">
.st2 {width:150px;height:150px;}
.st2  img{width:150px;height:150px;position:absolute;z-index:150;}
.st2:hover {width:150px;height:150px;overflow:visible;}
.st2:hover img{visibility:visible;position:absolute;z-index:150;}
</style>

<script type="text/javascript">
   $(function(){
    $('.img2').hover(function(){
      $(this).children('img').stop().animate({width:"300px",height:"300px"}, 400);
    }, function(){ $(this).children('img').stop().animate({width:"150px",height:"150px"}, 400); });
  });

</script>
<div class="st2"><div class="img2"><img src="http://4.bp.blogspot.com/-MMqXthpCFcI/UIfAX1IGRmI/AAAAAAAAB68/v9A7-fSMtQg/s1600/a_bae1912d.jpg" width="150" height="150"/></div>

Ниже пример-демо, можно навести курсор.



Маркировка красным, это урл. картинки и переменные величины размера, которые вы можете менять, по вашему усмотрению.

Кстати, чуть не забыл - БОЛЕЕ ПРОСТОГО РЕШЕНИЯ, ВЫ НЕ НАЙДЕТЕ, ГАРАНТИРУЮ!


© blogodel.com


Еще одно решение с тенью, общее для всех изображений блога, только на CSS. Вставляется в Дизайн - Добавить гаджет - HTML/JavaScript.


<style>.post-body img { -webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;transition: all 0.4s ease;
padding: 8px;
background: #ffffff;
border: 1px solid #d0d0d0;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.post-body img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);
background: #ffffff;
border: 1px solid #cccccc;
text-decoration: none;
text-shadow: none;
-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
}</style>

26 коммент.:

Александр Кувшинников
Justus
Александр Кувшинников
Justus
Анонимный
Justus
Анонимный
Justus
Анонимный
Justus
Илья
Justus
Илья
Justus
Альбина Рассеина
Александр
Justus
Артем Артемов
Justus
Артем Артемов
Анонимный
Сергей Хамзин
Артем Александров
Анонимный
Алла Позднякова
Любовь Масько

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

Можно применять теги: <b></b><i></i><br />
<br />


Доска почета

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