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

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

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

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





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

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

    BGtop


    OpenCloseComments
    Cancel