Пост (в основном) для пользователей: http://blogodel.com/2012/10/uvelichenii-kartinki-pri-navedenii.html
Опять в моем HTML редакторе (в результате экспериментов) получилась готовая, интересная заготовка для ВАС! Речь идет об увеличении картинки после наведения курсора. Этот вариант с использованием CSS и jQuery и я бы сказал более эффективный, чем только CSS! Публикую код одним блоком, который вставляется в ваш HTML редактор и ГОТОВО!
<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>
Маркировка красным, это урл. картинки и переменные величины размера, которые вы можете менять, по вашему усмотрению.
Еще одно решение с тенью, общее для всех изображений блога, только на 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>
|
|
0 коммент.:
Отправить комментарий