ZorNet.Ru — сайт для вебмастера » HTML и CSS » Изменение картинки при наведении клика на CSS

Изменение картинки при наведении клика на CSS

В материале рассмотрим один прекрасный эффект, как До и После, который выполнен на чистых CSS, где при наведении идет смена картинки. Его реализация может быть на разной тематике, главное, что отлично все работает, где можно поставить на любой сайт. Но безусловно, больше касаться будет темы услуг, где можно увидеть, как изначально было, и потом уже после какого то времени, что все преподносится на оригинальном эффекте.

Ранее все делалась на скриптах и плагинах, но сейчас при стилистике CSS3, стало возможно делать на них, что не нужно кроме стилей подключать, где реализация стала намного проще. Если рассматривать HTML код, то думаю здесь все понятно для всех, все очень просто, выставили контейнеры, где были помещены ссылки на картинки, что будут меняться.

Где первая идет по умолчанию, вторая уже появится, когда наведение клик на снимок, где сразу сработает смена. Теперь с помощью CSS, здесь зразу можно задать ширину и высоту, все на ваше усмотрение, главное, чтоб корректно смотрелось. Потом нужно присвоить изображению или фото, что идет ДО и ПОСЛЕ ширину как данные, это для того, чтоб сразу стало абсолютное позиционирование, где будут картинки друг на друга налаживаться, и все по размеру, не так, что одна больше, другая при появлении меньше станет.

HTML

Код

CSS

Код

a.nusakop_sagusqinas{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 648px;
height: 428px;
}

a.nusakop_sagusqinas img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,648px,428px,0);
}

a.nusakop_sagusqinas img:nth-of-type(2){
z-index: 1;
}

a.nusakop_sagusqinas:hover img:nth-of-type(1){
clip: rect(0,0,434px,0);
opacity: 0;
}

a.nusakop_sagusqinas.daqerkim{
width: 299px;
height: 343px;
}

a.nusakop_sagusqinas.daqerkim img{
clip: rect(0,299px,343px,0);
}

a.nusakop_sagusqinas.daqerkim:hover img:nth-of-type(1){
clip: rect(0,0,353px,0);
}

Так вот изначально все выставляем по размерам, и все появляется как нужно и корректно по форме. Вообще такая функция, как До и после под изображения, всегда интересны, особенно если правый переход используется для эффективной замены между ними.

Этот пример CSS показывает, что с использованием анимации CSS3 анимация свойства clip изображение before для отслаивания и отображения «после» изображения. Где результатом является простой, но безусловно изящный эффект.

Демонстрация

18 Июня 2018 Просмотров: 1835 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0