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