<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

CSS эффекты при наведении на картинку

CSS эффекты при наведении на картинку

CSS библиотека imagehover – это коллекция различных CSS эффектов при наведении на картинку (hover effects), которые можно применять как к одиночным картинкам, так и к галереям.

Ссылка на сайт: http://imagehover.io/

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

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

Что находится внутри CSS файла библиотеки? В бесплатной версии вы найдете 44 эффекта, каждый эффект имеет свой класс, в котором прописаны соответствующие свойства и их значения. В платной версии находятся стили 216 эффектов, но вам с головой хватит и 44 эффекта.

4 шага для запуска hover эффекта:

1) Скачать и подключить библиотеку

Скачайте архив и вытащите оттуда всего один CSS файл imagehover.min (сжатая версия) и подключите к вашему проекту.

<head>
  <link rel="stylesheet" href="css/imagehover.min.css">
</head>

2) Выберите эффект

На главной странице imagehover.io, выберите нужный эффект и запомните название его класса, например мне понравился класс imghvr-slide-up.

3) Создайте галерею на HTML

Создадим ряд row с тремя колонками column, в каждую из которых поместим превью картинку, текст-описание и ссылку. Вставьте название класса imghvr-slide-up в тег figure. Замените цвет подложки у тега figcaption, на более гармонирующий с дизайном сайта, по умолчанию фон под текстом – синий. У тега a, вместо решетки поставьте URL.

<div class="row">
  <div class="column">
    <figure class="imghvr-slide-up">
    <img src="cat.jpg" alt="cat">
    <figcaption style="background-color:#000;">
      <h2>Наведение на картинку</h2>
      <p>imghvr-slide-up</p>
    </figcaption>
    <a href="#"></a>
    </figure>
  </div>
  <div class="column">
    <figure class="imghvr-slide-up">
    <img src="dog.jpg" alt="dog">
    <figcaption style="background-color:#000;">
      <h2> Наведение на картинку</h2>
      <p>imghvr-slide-up</p>
    </figcaption>
    <a href="#"></a>
    </figure>
  </div>
  <div class="column">
    <figure class="imghvr-slide-up">
    <img src="zebra.jpg" alt="zebra">
    <figcaption style="background-color:#000;">
      <h2> Наведение на картинку</h2>
      <p>imghvr-slide-up</p>
    </figcaption>
    <a href="#"></a>
    </figure>
  </div>
</div>

4) CSS стили

Вам необходимо подключить к проекту собственный файл стилей для стилизации ваших классов, прописанных в HTML коде.

<head>
// подключить ниже файла imagehover.min.css
<link rel="stylesheet" href="css/style.css">
</head>

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

.row {
    display: flex;
    margin: 20px;
}

Поделим ряд на три одинаковых по ширине колонки и поставим по центру, контент (картинки) внутри блоков.

.column {
    flex: 33.33%;
    padding: 5px;
    text-align: center;
}

При изменении ширины экрана, картинки будут масштабироваться, не ломая созданную структуру.

img {
    width: 100%;
    border: 1px solid #ddd; /* серая рамка */
}

Ошибка в документации

Обратите внимание, что на сайте библиотеки в документации раздела Background Color, есть ошибка. Правильно будет поменять цвет фона с дефолтного на ваш, добавив строчку кода к тегу figcaption, вместо figure.

style="background-color: #код_вашего_цвета;
CSS эффекты при наведении на картинку.

Если вы все ещё размышляете о создании портфолио с вашими работами по веб-разработке, обратите внимание на видео-курс "О создании лендинга под ключ".

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.