| Kosten | Пятница, 12 Января 2018, 23:23 | Сообщение 1 |
| Рассмотрим один эффект на фото или снимки, где к ним прикрепим эффект при наведении курсора, что будет визуально изменятся при наведение. Что можно поставить на любой элемент, где прилагается изображение, что безусловно станет оригинально смотреться. Кто подключил фотоальбом, то здесь вы просто визуально все измените. Также все это создается на отдельных снимках, где просто с добавлением стилей, сразу все преображается.
CSS - это потрясающая технология, с ее помощью вы можете создавать поистине удивительные вещи. Каждый веб мастер старается сделать на своем сайте красивый эффект масштабирования на изображениях, чтоб смотрелось оригинально. В этой статье узнаете о том, как можно добавить эффект масштабирования в Image hover с помощью CSS.
HTML
Код <div class="dkolpesan_veganus"> <div class="kalin_brovka"> <div class="zersabun_lzaken"> <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/86PcdAu5SqizS4-mA-dIzg.png"/> </div> </div>
Применение эффекта масштабирования не сложно создать, при помощи масштабирования, где будем использовать CSS. Нужно понимать. Что при масштабировании картинки, здесь нужно изначально задавать оригинальный размер, а это означает, что высота и также ширина снимка обрезаются.
Как мы видим, я обернул изображения, на которых я хочу применить эффект масштабирования в оболочки, под значением kalin_brovka и zersabun_lzaken. Затем мы определим стили CSS для этих классов, а также для изображения, содержащегося в них.
CSS
Код .dkolpesan_veganus {
width: 983px;
margin: 0 auto;
}
.kalin_brovka {
float: left;
position: relative;
width: 437px;
height: 217px;
margin: 0 auto;
overflow: hidden;
}
.zersabun_lzaken {
position: absolute;
top: 0;
left: 0;
}
.zersabun_lzaken img {
-webkit-transition: 0.4s cubic-bezier(0.25, 0.1, 0.18, 0.94);
transition: 0.3s cubic-bezier(0.25, 0.1, 0.07, 0.9);
cursor: pointer;
}
.kalin_brovka:hover .zersabun_lzaken img {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
a{
display: block;
text-align:center;
margin: 0 auto;
width: 100%;
color: #aaa;
}
Для родительского класса контейнера kalin_brovka мы будем определять размер, который мы хотим сохранить, при отображении и масштабировании изображений внутри него. Обычно это будет такое же, как размер изображений. Для этого случая идет так 437px на 217px. Мы также определяем overflow: hidden этот родительский контейнер, это имеет решающее значение, если вы хотите обрезать изображение до его первоначальной высоты и ширины при применении эффекта масштабирования.
Видимость изображения может применяться к любой картинке вашего блога или сайта, просто добавьте несколько строк кода в ваш CSS.
PS - чтоб изменить скорость увеличение, то сами задаем ее, здесь за нее отвечает transform: scale(1.25), , что если ставим больше, то ускоряем, и меньше идет на замедление.
Демонстрация:
| | Страна: (RU) |
| |
