Създаване и водене на безплатен блог на платформата Blogger. Препоръки и съвети.

Търсене

Breaking

четвъртък

Смяна на изображение под курсор

Смяна на изображение
Здравейте, приятели. Подготвих за вас един простичък урок. Когато задържите курсора на мишката върху едно изображение, то да се заменя плавно с друго. Когато преместите курсора от изображението, отново се показва първото, оригиналното изображение.
Смяната на едно изображение с друго, когато задържите курсора на мишката върху него, се нарича на обикновен език ефект на търкаляне. Обикновено за ефекта на търкаляне се използва JavaScript, но в повечето случаи CSS е достатъчно. Вижте примера, който съм приготвила. Може би ще ви хареса тази опция и ще я използвате във вашия блог без никакви проблеми.













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

➤Изберете изображенията с един и същи размер и ги качете в редактора на блога си;

➤Копирайте адресите им и ги запазете, те ще ви трябват;

➤А сега към кодовете;

 Те са два. Единият е CSS, а вторият е HTML. Вписват се в страницата на публикацията, там където ще показвате сменящите се изображения, но един след друг. И заедно изглеждат така:

<style>
/*Свойства на контейнера*/
#img_container {
position:relative;
height:114px;
width:300px;
margin:0 auto;
cursor:pointer;
}
/*Свойства на изображенията в контейнера*/
#img_container img {
position:absolute;
left:0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
/*100% прозрачност под курсор на изображение*/
#img_container img.img_bottom:hover {
opacity:0;
}
</style>
<div id="img_container">
<img src="#" width="300px" height="300px" alt="" class="img_top">
<img src="#" width="300px" height="300px" alt="" class="img_bottom">

</div>


Ако ще използвате често този ефект, за ваше удобство разделете двата кода.


CSS код


/*Свойства на контейнера*/
#img_container {
position:relative;
height:114px;
width:300px;
margin:0 auto;
cursor:pointer;
}
/*Свойства на изображенията в контейнера*/
#img_container img {
position:absolute;
left:0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
/*100% прозрачност под курсор на изображение*/
#img_container img.img_bottom:hover {
opacity:0;

}


Този код трябва да бъде вмъкнат без промени в темата на блога, където са вписани всички негови стилове - пред реда ]] </b:skin> ;

HTML код


<div id="img_container">
<img src="#" width="300px" height="300px" alt="" class="img_top">
<img src="#" width="300px" height="300px" alt="" class="img_bottom">
</div>


Този код трябва да вписвате всеки път, когато ще използвате ефекта, но в HTML режим на страницата, където ще се показват изображенията ви. В него заменете „#” с URL адресите на избраните от вас изображения.
Това е целият простичък урок. Надявам се, че всичко е ясно. И имате избор при използването на този ефект.

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

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

BGtop

2 коментара:

  1. Поля Иванова6 април 2019 г., 8:21 ч.

    Здравейте, интересен метод за публикуване на снимки в блога. Имам въпрос-може ли повече от две снимки?

    ОтговорИзтриване
    Отговори
    1. Здравейте, съжалявам, но този начин на публикуване на снимки е само за две изображения в блога.

      Изтриване