Изображения. Увеличаване размера чрез CSS

Здравейте приятели. Връщам се отново към снимките, илюстрациите и картините, с една дума към изображенията в публикациите ни. Днес ще ви разкажа как да използвате малък CSS код, за да увеличите изображенията, при задържане на мишката върху тях.

1. Какво представлява този ефект
2. Как да го постигнем само в една публикация
3. Настройки на кода
4. Как да го постигнем за всички изображения в блога

По-рано вече публикувах информация за различните ефекти с изображенията. Те са моята страст. Ако искате, прочетете и тези статии. Ще ги намерите в " Съдържание" от менюто в раздела "Изображения".

Какво представлява този ефект

Днес в тази публикация ще говорим за автоматичното увеличение на изображенията при задържане на мишката, като използваме CSS код. Пример за този ефект можете да разгледате малко по-надолу в тази публикация. Или в друг мой блог. Там всички изображения в публикациите ми могат да се разгледат увеличени при задържане на мишката върху тях.

ПРИМЕР

✻✻✻

Как да го постигнем само в една публикация

Заредете в редактора на публикацията си изображение, илюстрация или снимка, коригирайте размера (малък, среден, голям) и попълнете в раздела „Свойства“ съответните Title и Alt.
Отворете раздела HTML и поставете този CSS код в долната част на страницата.

<style>.post img {

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.post img:hover {

width: 100%;

height: 100%;

}</style>

Оцветеното в червено определя степента на увеличаване на изображението при задържане на мишката върху тях. Тук е 100 %, тоест ще се увеличат двойно. В примера, който разгледахте преди малко увеличението е 80%. Тук имате избор.

Ако в CSS кода вмъкнете height: 50%; и width: 50%; ето така

<style>.post img {

height: 50%;

width: 50%;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.post img:hover {

width: 100%;

height: 100%;

}</style>

ще постигнете намаляване действителния размер на изображенията в публикациите си, включително и на главната страница.

✻✻✻

Настройки на кода

Оцветеното в синьо определя действителния размер на изображението;
Оцветеното в червено определя степента на увеличение на изображението при задържане на мишката;

Как да го постигнем за всички изображения в блога

Ако някой от вас желае да постигне този ефект за всички изображения в блога си нека направи малка корекция на CSS кода, която се състои в отстраняване на таговете  <style> и </style>.
и в този вид го постави в кода на темата пред реда ]]></b:skin>. 

.post img {

height: 50%;

width: 50%;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.post img:hover {

width: 100%;

height: 100%;

}  

Изпробвах този ефект върху изображения в страничната колона, не ми допадна. Но ако някой от вас иска да постигне и там подобен ефект може да направи промяна в CSS кода, като замени в него фрагмента .post img {  със  .sidebar img {. А аз ще помисля върху нещо по-рационално за изображенията в страничната колона на блога.

За днес това е от мен. Ако има въпроси, моля пишете в коментарите.

Доскоро и успех на всички.





Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: