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

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

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

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

Днес в тази публикация ще говорим за автоматичното увеличение на изображенията при задържане на мишката, като използваме 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 {. А аз ще помисля върху нещо по-рационално за изображенията в страничната колона на блога.

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

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





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

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