10 потрясающих CSS эффектов для картинок


В этой публикации я представлю 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 эффектов для картинок», жмите плиз кнопочки.

Коворкинг переговорная Москва платных и бесплатных Коворкингов Москвы.


Похожие по Тегам статьи


17 thoughts on “10 потрясающих CSS эффектов для картинок

  1. Егор Автор записи

    Да мне самому нравятся, и без скриптов все реализовано. Можно много где применить, людям должно понравится.

  2. Жанна Лира

    Красиво! Пару минут, как ребенок, играла с этими картинками )) Вот бы только придумать, куда приспособить 🙂

  3. Егор Автор записи

    Жанна, приспособить картинки можно хоть куда. Если хорошо пофантазировать 😥
    Ну а так хотя-бы на партнерскую ссылку, это я так, первое что пришло на ум. Если что пишите, если возникнут вопросы или затруднения.

  4. Елена

    Здравствуйте, Егор! Вы молодец *BRAVO* , что освещаете такие интересные штучки у себя на сайте. Спасибо!
    Захотелось себе на сайт поставить одну из картинок, но столкнулась с тем, что просто не разобралась с инструкцией, которую Вы предложили по размещению кода. Если Вас не затруднит Егор, можно для «чайников» прописать по детальнее =-O . В самом коде нужно ещё, что-то прописывать.
    Спасибо!
    С уважением, Елена!

    1. Егор Автор записи

      Здравствуйте, Елена, далеко не уходите, я сейчас сниму видео и в комментариях сообщу. Следите. Думаю лучше один раз увидеть, чем 10 раз услышать.

  5. Елена

    Егор, хочу вдогонку ещё один вопрос задать. Такие картинки предполагается размещать в сайдбаре?

    1. Егор Автор записи

      *THUMBS UP* Отличная идея. Только придется стили немного подправлять индивидуально, под ширину сайдбара, ведь она разная. Здесь рассчитано все на ширину картинки 300рх в ширину и 200рх в высоту плюс рамка и отступы. Но, ничего невозможного нет =) . Можно ставить в сайдбар, можно в текстовый виджет, правда тогда они поуже будут. Можно их выводить вместо анонсов! Если хотите применять все эффекты, нужно подключить отдельный файл CSS со стилями картинок. И радоваться.

      Кстати, видео почти готово, его уже программа обрабатывает.

      1. Егор Автор записи

        Еще добавочка, если подключить к ним Google Fonts шрифт гугл, оригинальный, вообще классно будет.

  6. Егор Автор записи

    Все, видео закинул. Звук что-то плохой вышел. Не знаю даже с чем это связано.

  7. Елена

    Егор, большое спасибо!!! Попробовала сделать у себя на сайте. Сама система работает, но похоже какой-то конфликт с темой идёт и коряво получилось http://prntscr.com/5v5cin.
    А так задумка хорошая.
    Можно я с Вами буду дружить *DANCE* .Вы учитесь и я буду подсматривать за Вами 8)

    1. Егор Автор записи

      Дружить нужно =) , если бы вы ссылку еще на свой сайт оставили.
      А насчет картинок, вы их размеры соблюдали? Потому что если размеры картинок другие, нужно подправлять стили.

  8. Елена

    Если добавить этот код в новую запись, то все отлично получается, а в сайдбаре — не очень корректно. Жаль!

    1. Егор Автор записи

      Надо ширину сйдбара, я выше писал об этом, подправить стили недолго.

  9. Елена

    Да, я в стилях в двух местах заменила на свои размеры картинку. У меня ещё тема капризная

  10. Юрий

    Спасибо! После просмотра видео получилось внести в файл stile.css код, все работает в WP

  11. Дмитрий

    Огромное спасибо за видео, долго не мог разобраться, что куда совать, и для чего))), но после просмотра вашего видео, сразу во всем разобрался.
    Спасибо за проделанную работу и труды.