2

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

Смяна на изображение
Здравейте, приятели. Подготвих за вас един простичък урок. Когато задържите курсора на мишката върху едно изображение, то да се заменя плавно с друго. Когато преместите курсора от изображението, отново се показва първото, оригиналното изображение.
Смяната на едно изображение с друго, когато задържите курсора на мишката върху него, се нарича на обикновен език ефект на търкаляне. Обикновено за ефекта на търкаляне се използва 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. Здравейте, съжалявам, но този начин на публикуване на снимки е само за две изображения в блога.

      Изтриване


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