0

Ефект на промяна на изображението при задържане на курсора

Закръгляне
Здравейте, приятели. Преди време написах публикация за това, как да променим формата на изображения в блога си. Как да им придадем кръгла форма чрез използването на значението border-radius.



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

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

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

    Вариант 1






    <style>.izo{
    border-radius: 45% / 20%; /* Закръгляне на ъглите */
    box-shadow: 0px 0px 15px #000; /* Сянка */
    padding:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    .izo:hover {
    border-radius: 0; /* Премахване на закръглянето */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    cursor:pointer;
    }</style>

    <img class=" izo" src="адрес на изображението" />


    Вариант 2







    <style>.izo1 {
    box-shadow: 0px 0px 15px #000; /* Сянка */
    border-radius: 50%; /* Закръгляне на ъглите */
    border:0;
    padding:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    .izo1:hover {
    box-shadow: 0; /* Премахване на сянката */
    border-radius: 0; /* Без граници на закръглянето */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    cursor:pointer;
    }</style>

    <img class=" izo1" src="адрес на изображението" />



    Вариант 3







    <style>.izo2 {
    background:#FFF; /* Цвят на фона около изображение */
    padding:15px; /* Растояние между рамка и изображение */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    .izo2:hover {
    box-shadow: 0px 0px 15px #000; /* Сянка */
    border-radius: 0% 50%; /* Закръгляне на границите */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    cursor:pointer;
    </style>

    <img class=" izo2" src="адрес на изображението" />



    Вариант 4






    <style>.izo3 {
    border:0;
    padding:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    .izo3:hover {
    box-shadow: 0px 0px 15px #000;
    border-radius: 50%;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    cursor:pointer;
    }
    </style>

    <img class=" izo3" src="адрес на изображението" />


    Инсталиране


    Както ви казах при често използване на който и да е от тези ефекти по- разумно е да впишете избрания код непосредствено в шаблона на блога пред реда  ]]></b:skin>.  При това е нужно задължително да замените всички значения

    .izo и .izo:hover с .post-body img и .post-body img:hover


    И после в публикацията напишете адреса на изображението така:



    <img class="rounded" src="Image URL"/>


    Моля, бъдете внимателни с всички символи в кода.

    Успех на всички и доскоро!







    Няма коментари :

    Винаги се радвам на Вашето мнение


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | Всички права запазени |
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита