Плавное увеличение картинки на страницах сайта

Как-то мне понадобилась для одного сайта функция увеличения картинки при наведении на неё курсора. Поиски нужного результата ни к чему пока не привели, но наткнулся на интересную фишку — эффект плавного увеличения картинки.

Рассчитан этот эффект для блогов на Блоггере (blogspot.com). Там этот код устанавливается очень просто и работает на Ура! Заходите на Блоггере в админку, на странице Дизайн добавляете гаджет HTML/ JavaScript и вставляете в него код, вернее не код а стили к картинкам сайта. Преимущества — без плагина, без скрипта, только CSS !!! Вот эти стили надо вставить в гаджет:


&amp;lt;style&amp;gt;.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);
}&amp;lt;/style&amp;gt;

&lt;style&gt;.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);

}&lt;/style&gt;

Сохраняете запись в гаджете и вставляете его в любое место, это роли не играет.

Решил немного поэспериментировать, а будут ли эти стили работать на других движках… Решил попробовать и прописал эти стили для другого сайта на WordPress. Открыл файл style.css и в самом низу прописал эти стили, убрав теги <style> </style>. К моему удивлению всё заработало! Но не будем спешить…

Решил еще на одном сайте сделать такой эффект, прописал стили в самом низу файла style.css, но….ничего так и не заработало. Я не стал влезать в тонкости CSS, просто нет времени. Просто стало интересно, почему на одном работает, а на другом нет. И вот что выяснилось….Шаблоны сайтов были сделаны в программе Artisteer . И вот тут получается интересное кино! Эффект работал на сайтах, шаблон которых сделан в программе Artisteer — 3, а вот в шаблонах, собранных в Artisteer — 4 почему-то не хочет работать.

Когда будет время, я это выясню. Ну а пока можете самостоятельно пробовать установить такой эффект на своём сайте.

Продолжение.

После недолгих поисков нашлось решение и для шаблонов собранных в программе Artisteer — 4. Для таких шаблонов надо вставить этот же код в файл style.css, но с одним изменением — вместо .post-body img пропишите .content img. У меня такой вариант сработал.

Статья была полезной?