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

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

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

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