CSS3 эффекты: изображение с блоками подсказок!

В этом уроке мы создадим небольшой эффект css3 эффект, используя комбинацию псевдо-класса :checked с братом комбинатора (sibling combinators). Идея состоит в том, чтобы сделать изображение или элемент интерактивным, и добавить всплывающие подсказки при нажатии на изображение. Очень полезный эффект, особенно если Вы занимаетесь продажей шаблонов сайтов, хотя можно найти любое применение.

Если Вам необходимы всплывающие подсказки при наведении на текст, читайте статью о их создании с помощью CSS & JQuery + 7 примеров!

Тема предварительного просмотра изображений, используемая в демо примере, создана автором Ana Segota.

HTML разметка

Наша структура кода будет состоять из части название и описание, и части предварительного просмотра. Часть предварительного просмотра будет иметь эффект наложения. Идея состоит в том, чтобы добавить флажок, изображение и список блоков с подсказками, заключенными в тег span.

Таким образом, мы можем делать сколько угодно всплывающих подсказок span. Мы будем позиционировать каждую из них по отдельности. Теперь давайте посмотрим на CSS код.

CSS стили

Разделитель с классом ao-item будет иметь ширину 80%, потому что мы хотим, чтобы весь блок был резиновым:

Два внутренних подразделения будут плавающими, поэтому давайте проясним некоторые позиционирования с помощью одной замечательной техники:

Давайте подробно стилизуем часть с названием и описанием. Мы зададим перемещение float вправо и ширину 40%. Мы также добавим левый отступ, который не вызывает у нас никаких проблем, потому что мы применили box-sizing: border-box для всех элементов в файле normalize.css.

Таким образом, это будет гарантировать, что разделение на самом деле 40% и отступ находится «внутри» всего блока:

Затем мы добавим некоторые стили к тексту элементов:

Предварительный просмотр будет немного больше и помещен влево float:left:

Теперь мы будем работать с изображением. Мы дадим ему максимальную ширину в 100%. Это гарантирует, что он будет содержаться в родительском блоке. Изображение будет иметь плавный переход. Суть состоит в том, чтобы немного уменьшить его, как только мы нажали на него:

Для всплывающих подсказок мы установили абсолютное позиционирование. Мы сделаем его невидимым, установив opacity:0. Он также будет иметь красивый и плавный переход, чтобы как только мы отметим чекбокс, изменился масштаб и подсказки стали непрозрачными.

Аннотации span имеют абсолютное позиционирование, и мы дадим им минимальную ширина min-width 140 пикселей, так как ширина в процентах. Эффект перехода будет уменьшать и показывать opacity:1:

Каждая подсказка span будет иметь небольшую стрелку, и мы добавим её с помощью псевдо-класса :after.

У нас два тега span будут иметь стрелку в левую сторону:

Теперь мы установим для каждой подсказки аннотации свое положение. Мы будем использовать проценты для правильного позиционирования:

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

Он будет “скрытый”, так как мы установили непрозрачность до 0. Но он все еще там, поэтому мы можем нажать на него. Его z-index должен быть выше, чем у всех других элементов:

И мы сейчас будем определять, что происходит, когда мы нажимаем на флажок. Изображение будет уменьшено “внутрь”, измениться тень вокруг и станут видны подсказки:

Поскольку мы не можем использовать img:hover (помните, флажок находится поверх всего), мы сделаем это немного по другому:

Обертка с классом ao-annoations и теги span будет масштабироваться до 1 и становиться непрозрачными:

Чтобы добавить небольшую изюминку, мы сделаем появление каждой всплывающей подсказки с небольшой задержкой:

И последнее, но не менее важное, мы добавим media запрос для удаления позиции float основных подразделений и уменьшения размера шрифта для span аннотаций:

И это все! Я надеюсь, вам понравился этот урок и Вы нашли то, что искали! Буду рад услышать Ваше мнение в комментариях. Спасибо за внимание!

---