Плавное увеличении картинки при наведении курсора, с использованием 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>

Доска почета

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