Есть разные по функциям слайдеры, если брать этот, то он отличается по своему функционалу и безусловно по дизайну. Слайдер изначально состоит из 4 картинок, которым закреплены ключевые слова виде название.
Где по умолчанию идет пакет сложенных картинок. Но видя название, то здесь наводим клик на выбранное изображение и появляется полноценный снимок, который при желание можно поставить под ссылку на переход.
При открытие страницы, по умолчанию:
Здесь навели клик на один из снимков:
HTML
Код
<div class="zadesuvu_mubedas">
<ul>
<!-- 1 элемент слайдера -->
<li>
<div class="maxetus_avemipok">
<a href="/">ZorNet.Ru<br><span> портал для вебмастера №1</span></a>
</div>
<a href="/">
<img src="Ссылка на изображение #1">
</a>
</li>
<!-- 2 элемент слайдера -->
<li>
<div class="maxetus_avemipok">
<a href="/">ZorNet.Ru<br><span> портал для вебмастера №2</span></a>
</div>
<a href="/">
<img src="Ссылка на изображение #2">
</a>
</li>
<!-- 3 элемент слайдера -->
<li>
<div class="maxetus_avemipok">
<a href="/">ZorNet.Ru<br><span> портал для вебмастера №3</span></a>
</div>
<a href="/">
<img src="Ссылка на изображение #3">
</a>
</li>
<!-- 4 элемент слайдера -->
<li>
<div class="maxetus_avemipok">
<a href="/">ZorNet.Ru<br><span> портал для вебмастера №4</span></a>
</div>
<a href="/">
<img src="Ссылка на изображение #3">
</a>
</li>
</ul>
</div>
CSS
Код
.zadesuvu_mubedas {
width: 990px; height: 375px;
overflow: hidden;
margin: 20px auto;
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
/*Небольшой хак для предотвращения мелькания на некоторых браузерах*/
.zadesuvu_mubedas ul {
width: 2000px;
padding: 0;
margin: 0;
}
.zadesuvu_mubedas li {
position: relative;
display: block;
width: 247px;
float: left;
border-left: 1px solid #888;
/* создание тени */
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
/* Создание анимации с помощью переходов */
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
/* Уменьшить ширину для неактивных изображений */
.zadesuvu_mubedas ul:hover li {
width: 80px;
}
/* Задание ширины изображения при поднесении к ней курсора */
/* Данный стиль (li:hover) переопределит ul:hover */
.zadesuvu_mubedas ul li:hover {
width: 750px;
}
.zadesuvu_mubedas li img {
display: block;
width: 750px;
}
/* Стиль для блока, содержащего ссылку */
.maxetus_avemipok {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;
width: 750px;
}
/* Стиль для ссылки */
.maxetus_avemipok a {
display: block;
color: #fff;
font-weight: 200;
text-decoration: none;
padding: 20px;
font-size: 24px;
}
.maxetus_avemipok a span {
font-size: 18px;
}
Здесь при любых ситуациях можно активировать только одно изображение, а все остальные изображения при этом имеют заданную ширину ширину.
Демонстрация
