В этой публикации я представлю CSS эффекты изображений. В подборке представлены 10 CSS эффектов для картинок, которые действительно потрясают воображение. На днях один заказчик (я иногда зарабатываю на мороженое фрилансом))) на своей продающей странице захотел увидеть CSS hover эффекты для превьюшек на товар, который он предлагает, с ссылками на конкретный продукт в интернет-магазине. Короче озадачил.
К сожалению эти эффекты не отображаются в Internet Exlorer 6 и более ранних версиях, но этими динозаврами по статистике пользуется все меньшее и меньшее количество людей. В них показывается картинка и ссылка в рамке.
Итак, тянуть не буду, лучше сами посмотрите на эти ховеры.
Крутые CSS эффекты изображений
А теперь давайте посмотрим как это все устроено внутри на одном из примеров.
CSS и HTML код эффектов изображений на примере №1
<!DOCTYPE html>
<!--cтили желательно перенести в таблицу стилей только без тегов <style></style>, а можно и оставить прям на странице -->
<style>
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url("/10-potryasayushhix-css-effektov-dlya-kartinok/moto/bgimg.jpg"); no-repeat center center <!-- подложка не забудьте прописать новый путь -->
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(219,127,8, 0.7);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}
</style>
<!-- Этот код вставляем в таблицу, меняем картинку и ставим свою ссылку -->
<div class="view view-first">
<img src="moto/image_001.jpg" />
<div class="mask">
<h2>Заголовок</h2>
<p>Ваш текст</p>
<a href="#" class="info">Read More</a>
</div>
</div>
Подбирайте картинки размером 300 на 200 пикселей, ну а кто соображает в CSS, не составит большого труда изменить исходные параметры этих CSS эффектов изображений на нужные. Вобще у меня есть идея сделать шаблон с выводом записей на главной странице сайта в виде миниатюр с этими стилями, ну или применить эти стили к выводу миниатюр типа «Советую прочитать» Применение найти всегда можно.
Вот ссылка на скачивание этих 10-ти CSS эффектов для картинок, там разложено все по папочкам, разберетесь короче говоря.
Скачать примеры
Если у кого возникли вопросы или предложения, оставляйте комменты, всегда буду рад Вам помочь.
Если Вам понравилась статья «10 потрясающих CSS эффектов для картинок», жмите плиз кнопочки.
Похожие по Тегам статьи
Создание Video Background HTML 5В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы
Оформление текста в HTML — Выноски CalloutПубликую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…
Системные шрифты, подключение шрифтов к сайтуШрифты — это неотъемлемая и очень важная часть дизайна сайта, подчеркивающая его индивидуальность. В…
Да мне самому нравятся, и без скриптов все реализовано. Можно много где применить, людям должно понравится.
Красиво! Пару минут, как ребенок, играла с этими картинками )) Вот бы только придумать, куда приспособить 🙂
Жанна, приспособить картинки можно хоть куда. Если хорошо пофантазировать 😥
Ну а так хотя-бы на партнерскую ссылку, это я так, первое что пришло на ум. Если что пишите, если возникнут вопросы или затруднения.
Здравствуйте, Егор! Вы молодец *BRAVO* , что освещаете такие интересные штучки у себя на сайте. Спасибо!
Захотелось себе на сайт поставить одну из картинок, но столкнулась с тем, что просто не разобралась с инструкцией, которую Вы предложили по размещению кода. Если Вас не затруднит Егор, можно для «чайников» прописать по детальнее =-O . В самом коде нужно ещё, что-то прописывать.
Спасибо!
С уважением, Елена!
Здравствуйте, Елена, далеко не уходите, я сейчас сниму видео и в комментариях сообщу. Следите. Думаю лучше один раз увидеть, чем 10 раз услышать.
Спасибо, Егор! Буду ждать.
Егор, хочу вдогонку ещё один вопрос задать. Такие картинки предполагается размещать в сайдбаре?
*THUMBS UP* Отличная идея. Только придется стили немного подправлять индивидуально, под ширину сайдбара, ведь она разная. Здесь рассчитано все на ширину картинки 300рх в ширину и 200рх в высоту плюс рамка и отступы. Но, ничего невозможного нет =) . Можно ставить в сайдбар, можно в текстовый виджет, правда тогда они поуже будут. Можно их выводить вместо анонсов! Если хотите применять все эффекты, нужно подключить отдельный файл CSS со стилями картинок. И радоваться.
Кстати, видео почти готово, его уже программа обрабатывает.
Еще добавочка, если подключить к ним Google Fonts шрифт гугл, оригинальный, вообще классно будет.
Все, видео закинул. Звук что-то плохой вышел. Не знаю даже с чем это связано.
Егор, большое спасибо!!! Попробовала сделать у себя на сайте. Сама система работает, но похоже какой-то конфликт с темой идёт и коряво получилось http://prntscr.com/5v5cin.
А так задумка хорошая.
Можно я с Вами буду дружить *DANCE* .Вы учитесь и я буду подсматривать за Вами 8)
Дружить нужно =) , если бы вы ссылку еще на свой сайт оставили.
А насчет картинок, вы их размеры соблюдали? Потому что если размеры картинок другие, нужно подправлять стили.
Если добавить этот код в новую запись, то все отлично получается, а в сайдбаре — не очень корректно. Жаль!
Надо ширину сйдбара, я выше писал об этом, подправить стили недолго.
Да, я в стилях в двух местах заменила на свои размеры картинку. У меня ещё тема капризная
Спасибо! После просмотра видео получилось внести в файл stile.css код, все работает в WP
Огромное спасибо за видео, долго не мог разобраться, что куда совать, и для чего))), но после просмотра вашего видео, сразу во всем разобрался.
Спасибо за проделанную работу и труды.