13 красивых CSS эффектов для изображений
Опубликовано: 05.09.2018
Сегодня вы попробуете украсить свой сайт или блог красивыми эффектами для изображений с помощью CSS и обычного HTML кода. Да, именно CSS и обычного HTML кода, без использования языка программирования PHP, JavaScript, jQueri и прочих.
Что могут эффекты, предложенные мной на блоге BlogGood.ru: плавно увеличивать и уменьшать изображения; вертикально и горизонтально смещать изображения; наклонять или приводить в полный поворот изображения; закруглять изображения;А также и такие эффекты:
размытие, осветление, контрастность, сепия; плавный переход с цветного изображение в черно-белое; инверсия цвета.Чтобы воспользоваться кодом, вам достаточно скопировать вначале основной код, а потом код эффекта и вставить, естественно, на свой блог или сайт.
[ посмотреть демонстрацию ]
Основной код
Этот код применяется ко всем эффектам, которые будут предложены для вас далее:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111; box-shadow: 5px 5px 5px #111; }Все стили в классе « .pic » будут общими для всех изображений. Для всех изображений установлена белая рамка в 10px ( строка №13 ). Указываются одинаковые размеры изображения для высоты и ширины в 300px ( строка №15, №16 ). Отступ от блоков в 20px ( строка №17 ). Чтобы картинка не выходила за указанные приделы, прописываем « overflow: hidden; ». Если для вас все это непонятно, настоятельно рекомендую прочитать основы CSS .
Приступаем к эффектам.
1. Эффект «Увеличение»
В HTML файл вставьте между тегами <body></body> вот этот код:
<div class="grow pic"> <img src="bloggood-1.jpg "> </div>Строка №2 , укажите путь к изображению, размер которого 400 х 400px.
В CSS вставьте вот этот код:
/* увеличить изображение */ .grow img { height: 300px; width: 300px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .grow img:hover { width: 400px; height: 400px; }Изображение по сути 400 х 400px, но мы уменьшим его под наш блок 300 х 300px ( Строка №3 и №4 ).
Изображение изменяется плавно к исходному изображению 400 х 400px ( Строка №14 и №15 ). За плавное изменение размеров отвечает свойство transition , где указанно 1 секунда. ( Строка №6 - №10 ).2. Эффект «Уменьшение»
По сути, это один и тот же код, только нужно поменять размеры и изображение плавно с больших размеров 400 х 400px уменьшиться на 300 х 300px.
В HTML файл между тегами <body></body> вставьте вот этот код:
<div class="shrink pic"> <img src=" bloggood-2.jpg "> </div>В CSS вставьте вот этот код:
/*уменьшение изображение*/ .shrink img { height: 400px; width: 400px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .shrink img:hover { width: 300px; height: 300px; }3. Эффект «Горизонтальное смещение»
Этот эффект меняет позиции блока. То есть, если навести курсором на картинку, изображение сместится в сторону.
В HTML файл вставьте между тегами <body></body> вот этот код:
<div class="sidepan pic"> <img src="bloggood-3.jpg"> </div>В строке №2 укажите путь к изображению, размер которого 600 х 300px.
В CSS вставьте вот этот код:
/*горизонтальное смещение изображение*/ .sidepan img { margin-left: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; } .sidepan img:hover { margin-left: -200px; }Чтобы картинка сместилась влево, укажите в свойстве « margin-left » значение «-200». Если значение указать «200», смещение будет в правую сторону.
4. Эффект «Вертикальное смещение»
По сути, это один и тот же код, только нужно вместо свойства « margin-left » прописать « margin-top » и изображение при наведении курсора плавно будет двигаться вверх.
В HTML файл вставьте между тегами <body></body> вот этот код:
<div class="vertpan pic"> <img src="bloggood-4.jpg"> </div>В CSS вставьте вот этот код:
/*Вертикальное смещение изображение*/ .vertpan img { margin-top: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; } .vertpan img:hover { margin-top: -200px; }Если в свойствах « margin-top » указать значение «200», смещение изображения будет вниз.
5. Эффект «Наклон»
Этот эффект позволит сделать небольшой поворот изображения при наведении на него мышки.
В HTML файл вставьте между тегами <body></body> вот этот код:
<div class="tilt pic"> <img src="bloggood-5.jpg"> </div>В CSS вставьте вот этот код:
/*наклон изображеня*/ .tilt { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .tilt:hover { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); }Картинка при наведении курсора повернется на 100 влево ( Строка№11-№15 ). Вы можете увеличить градус поворота самостоятельно.
6. Эффект «Поворот изображения с изменением формы»
Это мой любимый эффект. При наведении курсора мышки на изображение, оно делает один круг вращения, при этом квадратная форма меняется в круглую.
В HTML файл вставьте между тегами <body></body> вот этот код:
<div class="morph pic"> <img src="bloggood-6.jpg"> </div>В CSS вставьте вот этот код:
/*поворот изображения с изменением формы*/ .morph { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .morph:hover { border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }За закругление углов отвечает « border-radius » со значением «50%».
За поворот изображения на 3600 отвечает свойство transform.7. Эффект «Фокусировка изображения»
В этом эффекте нет ничего необычного, просто закругляется изображение и увеличивается толщина рамки.
В HTML файл вставьте между тегами <body></body> вот этот код:
<div class="focus pic"> <img src="Bloggood-7.jpg"> </div>В CSS вставьте вот этот код:
/*фокусировка изображения*/ .focus { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .focus:hover { border: 70px solid #000; border-radius: 50%; }Здесь, думаю, вам все понятно: border отвечает за толщину рамки и border-radius за радиус закругления.
8. Эффект «Размытие»
При наведении курсора мышки на четкое изображение оно будет становиться размытым.
В HTML файл вставьте между тегами <body></body> вот этот код:
<div class="blur pic"> <img src="bloggood-8.jpg"> </div>В CSS вставьте вот этот код:
/* размытие изображения*/ .blur img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .blur img:hover { -webkit-filter: blur(5px); }За размытие отвечает свойство « webkit-filter: blur » с параметрами 5px.
9. Эффект «Черно-белое изображение»
При наведении курсора мышки на цветное изображение, оно тут же становится черно-белым.
В HTML файл вставьте между тегами <body></body> вот этот код:
<div class="bw pic"> <img src="bloggood-9.jpg"> </div>В CSS вставьте вот этот код:
/*черно-белое изображение*/ .bw { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .bw:hover { -webkit-filter: grayscale(100%); }Насколько сделать черно-белым изображение отвечает фильтр « webkit-filter: grayscale » со значением «100%». Можете указать собственное значение от 1%-100%.
10. Эффект «Осветление»
Затемненное изображение, при наведении на него курсора мышки, становится ярче.
В HTML файл вставьте между тегами <body></body> вот этот код:
<div class="brighten pic"> <img src="bloggood-10.jpg"> </div>В CSS вставьте вот этот код:
/*осветление изображения*/ .brighten img { -webkit-filter: brightness(10%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .brighten img:hover { -webkit-filter: brightness(100%); }Изначально затемняет изображение на «10%» ( строка №3 )
При наведении курсора мышки, осветляет изображение на «100%»( строка №12 )
11. Эффект «Сепия»
Тоже довольно неплохой эффект, с помощью которого изображение превратится в тональность сепия.
В HTML файл вставьте между тегами <body></body> вот этот код: <div class="sepia pic"> <img src="bloggood-11.jpg "> </div>В CSS вставьте вот этот код:
/* Сепия*/ .sepia img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .sepia img:hover { -webkit-filter: sepia(100%); }12. Эффект «Контрастность»
Я думаю, само название уже говорит о том, что при наведении на изображение курсора, картинка станет насыщенней и контрастней.
В HTML файл вставьте между тегами <body></body> вот этот код: <div class="contrast pic"> <img src="bloggood-12.jpg"> </div>В CSS вставьте вот этот код:
/*Контрастность изображения*/ .contrast img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .contrast img:hover { -webkit-filter: contrast(185%); }Обратите внимание на строку №11 . Если указать значение «100%», изменения не произойдут. Если процент сделать больше «100%», например «185%», изображение станет контрастней. Если процент сделать меньше «100%», например «60%», изображение потускнеет.
13. Эффект «Инверсия» Это тоже один из моих любимых эффектов. Как-то по «металёвому» смотрится 
.
В HTML файл вставьте между тегами <body></body> вот этот код:
<div class="invert pic"> <img src="bloggood-13.jpg"> </div>В CSS вставьте вот этот код:
/*Инверсия изображения*/ .invert img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .invert img:hover { -webkit-filter: invert(100%); }Значение инверсии задается от 0% до 100% ( строка №11 ).
Вот и все! Надеюсь, статья вам понравилась! Если понравилась, жмите на лайк социальных сетей.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css , для сайта , эффекты для сайта