Всплывающие подписи изображений

Web-Дизайн
help2site

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

Важно: описанные эффекты ниже, работают только в последних версиях браузеров (все версии поддерживающие CSS3).

HTML разметкa

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

Внутри контейнера с классом view вставим еще один контейнер с классом mask, он и будет отвечать за наши эффекты при наведение управляемых CSS3, внутри него мы разместим заголовок, описание и ссылку на полный обзор материала.

В некоторых примерах нам придется немного модифицировать HTML разметку но об этом немного позже.

				
					<div class="view">  
     <img decoding="async" src="image.gif" alt="Сервера, Web и не только" title="Сервера, Web и не только - ОС, IT, Web">  
     <div class="mask">  
     <h2>Title</h2>  
     <p>Your Text</p>  
         <a href="#" class="info">Read More</a>  
     </div>  
</div>

CSS

После создания нашей HTML разметки мы пропишем стили для каждого элемента.

В расположенном ниже коде мы устанавливаем общие правила для наших контейнеров, а затем мы будем добавлять отдельные стили для каждого из эффектов. Мы опускаем префиксы CSS3 при показе стилей.

				
					.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(../images/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
}

А теперь давайте рассмотрим каждый из десяти представленных эффектов подробнее.

Пример 1

Добавим специальный дополнительный класс для основного контейнера view для этого эффекта. Мы будем добавлять новый специальный класс для каждого примера для простоты названия класса для каждого примера будем присваивать по номеру примера: view-first, view-second, view-third, и т.д.

				
					<div class="view view-first">

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

				
					.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;
}

И вот основная часть нашего эффекта. При наведение мыши на изображении, мы используем свойство задержки для эмуляции простой анимации. Эффект задержки, что мы используем в классе при наведении могут быть изменены, чтобы отличаться, чем в обычном классе. В этом примере мы не использовали каких-либо задержек в обычном классе; но мы добавили задержку при наведении, который поможет начать переход немного позже. Перемещение мыши из, значение по умолчанию 0s будет применяться, и «обратного» будет быстрее.

				
					.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;

Пример 2

Во втором примере мы добавим специальный класс view-second, но мы оставим контейнер с классом mask пустым и обернем описание в новый DIV с классом content

				
					<div class="view view-second">
 <img decoding="async" src="images/5.jpg" alt="Сервера, Web и не только" title="Сервера, Web и не только - ОС, IT, Web">
 <div class="mask"></div>
 <div class="content">
  <h2>Стиль номер #2</h2>
 <p>ваш текст</p>
 <a href="#" class="info">Read More</a>
 </div>
 </div>

Контейнер с классом mask будет иметь различные атрибуты, чтобы удовлетворить нашу силу, на самом деле мы собираемся применить преобразования собственности (translate и rotate) и сделает квадрат из него. Описание элементов будут переведены, то есть перемещается так, что мы можем сдвиньте их при наведении :

				
					.view-second img {
 transition: all 0.2s ease-in;
}
.view-second .mask {
 background-color: rgba(115,146,184, 0.7);
 width: 300px;
 padding: 60px;
 height: 300px;
 opacity: 0;
 transform: translate(265px, 145px) rotate(45deg);
 transition: all 0.2s ease-in-out;
}
.view-second h2 {
 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 background: transparent;
 margin: 20px 40px 0px 40px;
 transform: translate(200px, -200px);
 transition: all 0.2s ease-in-out;
}
.view-second p {
 transform: translate(-200px, 200px);
 transition: all 0.2s ease-in-out;
}
.view-second a.info {
 transform: translate(0px, 100px);
 transition: all 0.2s 0.1s ease-in-out;
}

Для нашего наведении эффект мы используем перевести преобразование для того, чтобы двигаться наши элементы на месте. Маска также будет вращаться. Элементы описания будут друг пришел с небольшой задержкой:

				
					.view-second:hover .mask {
 opacity:1;
 transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
 transform: translate(0px,0px);
 transition-delay: 0.3s;
}
.view-second:hover p {
 transform: translate(0px,0px);
 transition-delay: 0.4s;
}
.view-second:hover a.info {
 transform: translate(0px,0px);
 transition-delay: 0.5s;
}

Пример 3

В этом третьем примере мы будем использовать translate и rotate преобразования воспитывать наше содержание:

				
					.view-third img {
 transition: all 0.2s ease-in;
}
.view-third .mask {
 background-color: rgba(0,0,0,0.6);
 opacity: 0;
 transform: translate(460px, -100px) rotate(180deg);
 transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2{
 transform: translateY(-100px);
 transition: all 0.2s ease-in-out;
}
.view-third p {
 transform: translateX(300px) rotate(90deg);
 transition: all 0.2s ease-in-out;
}
.view-third a.info {
 transform: translateY(-200px);
 transition: all 0.2s ease-in-out;
}

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

				
					.view-third:hover .mask {
 opacity:1;
 transition-delay: 0s;
 transform: translate(0px, 0px);
}
.view-third:hover h2 {
 transform: translateY(0px);
 transition-delay: 0.5s;
}
.view-third:hover p {
 transform: translateX(0px) rotate(0deg);
 transition-delay: 0.4s;
}
.view-third:hover a.info {
 transform: translateY(0px);
 transition-delay: 0.3s;
}

Пример 4

Здесь, в четвертом примере мы будем выполнять простые Увеличить изображение и зум в нашей содержания с вращением, все благодаря шкале преобразования. Мы установили переходный задержку в 0,2 секунды для стиля изображения, но при наведении мы будем говорить, что это 0 секунд. Это позволит начать сразу при наведении, но задержать его на мыши вне.

				
					.view-fourth img {
 transition: all 0.4s ease-in-out 0.2s;
 opacity: 1;
}
.view-fourth .mask {
 background-color: rgba(0,0,0,0.8);
 opacity: 0;
 transform: scale(0) rotate(-180deg);
 transition: all 0.4s ease-in;
 border-radius: 0px;
}
.view-fourth h2{
 opacity: 0;
 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 background: transparent;
 margin: 20px 40px 0px 40px;
 transition: all 0.5s ease-in-out;
}
.view-fourth p {
 opacity: 0;
 transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
 opacity: 0;
 transition: all 0.5s ease-in-out;
}

Эти простые инструкции, чтобы получить эффект — с CSS3 вы можете делать все :

				
					.view-fourth:hover .mask {
 opacity: 1;
 transform: scale(1) rotate(0deg);
 transition-delay: 0.2s;
}
.view-fourth:hover img {
 transform: scale(0);
 opacity: 0;
 transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
 opacity: 1;
 transition-delay: 0.5s;
}

Пример 5

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

				
					.view-fifth img {
transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
background-color: rgba(146,96,91,0.3);
transform: translateX(-300px);
opacity: 1;
transition: all 0.4s ease-in-out;
}
.view-fifth h2{
background: rgba(255, 255, 255, 0.5);
color: #000;
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p{
opacity: 0;
color: #333;
transition: all 0.2s linear;
}

Эффект парения сделает слайд-вправо и описание приходят слева, как будто это толкает изображение:

				
					.view-fifth:hover .mask {
transform: translateX(0px);
}
.view-fifth:hover img {
transform: translateX(300px);
transition-delay: 0.1s;
}
.view-fifth:hover p{
opacity: 1;
transition-delay: 0.4s;
}

Пример 6

В этом примере мы сделаем описание приехать с фронта, не масштабирование, пока его первоначального размера (шкала от фактора 10 до 1).Кнопка Информация будет скользить из нижней (перевод).

				
					.view-sixth img {
transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask{
background-color: rgba(146,96,91,0.5);
opacity:0;
transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2{
opacity:0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(10);
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
opacity:0;
transform: scale(10);
transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
opacity:0;
transform: translateY(100px);
transition: all 0.3s ease-in-out 0.1s;
}

Обратный переход будет отложен таким образом, что она выглядит гладкой:

				
					.view-sixth:hover .mask {
 opacity:1;
 transition-delay: 0s;
}
.view-sixth:hover img {
 transition-delay: 0s;
}
.view-sixth:hover h2 {
 opacity: 1;
 transform: scale(1);
 transition-delay: 0.1s;
}
.view-sixth:hover p {
 opacity:1;
 transform: scale(1);
 transition-delay: 0.2s;
}
.view-sixth:hover a.info {
 opacity:1;
 transform: translateY(0px);
 transition-delay: 0.3s;
}

Пример 7

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

				
					.view-seventh img{
transition: all 0.5s ease-out;
opacity: 1;
}
.view-seventh .mask {
background-color: rgba(77,44,35,0.5);
transform: rotate(0deg) scale(1);
opacity: 0;
transition: all 0.3s ease-out;
transform: translateY(-200px) rotate(180deg);
}
.view-seventh h2{
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh p {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}

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

				
					.view-seventh:hover img{
transform: rotate(720deg) scale(0);
opacity: 0;
}
.view-seventh:hover .mask {
opacity: 1;
transform: translateY(0px) rotate(0deg);
transition-delay: 0.4s;
}
.view-seventh:hover h2 {
transform: translateY(0px);
transition-delay: 0.7s;
}
.view-seventh:hover p {
transform: translateY(0px);
transition-delay: 0.6s;
}
.view-seventh:hover a.info {
transform: translateY(0px);
transition-delay: 0.5s;
}

Пример 8

В этом восьмом примере мы будем использовать анимацию и воссоздать отказов эффект.Описание отказов в сверху.

				
					.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
opacity: 0;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2{
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.3s;
}

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

				
					.view-eighth:hover .mask {
opacity: 1;
top: 0px;
transition-delay: 0s;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
transform: translateY(0px);
transition-delay: 0.4s;
}
.view-eighth:hover p {
transform: translateY(0px);
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
transform: translateY(0px);
transition-delay: 0s;
}

Для воссоздания истинного отказов эффект мы используем translateY, как вы можете видеть, что есть пара кадров, для того, чтобы эффект:

				
					@keyframes bounceY {
0% { transform: translateY(-205px);}
40% { transform: translateY(-100px);}
65% { transform: translateY(-52px);}
82% { transform: translateY(-25px);}
92% { transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}

Пример 9

В этом примере, мы будем использовать два элемента маски, чтобы скользить их из нижней правой и левой верхней:

				
					<div class="view view-ninth">
<img decoding="async" src="images/11.jpg" alt="Сервера, Web и не только" title="Сервера, Web и не только - ОС, IT, Web">
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>

Два маски будет иметь различный перевод и transfrom происхождение. Кроме того, мы установим один, чтобы быть выверен на верхней и другой внизу:

				
					.view-ninth .mask-1,
.view-ninth .mask-2{
background-color: rgba(0,0,0,0.5);
height: 361px;
width: 361px;
background: rgba(119,0,36,0.5);
opacity: 1;
transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
left: auto;
right: 0px;
transform: rotate(56.5deg) translateX(-180px);
transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
top: auto;
bottom: 0px;
transform: rotate(56.5deg) translateX(180px);
transform-origin: 0% 100%;
}

Содержание будет в стиле образом, что она выглядит как как будто это выходит как крошечный кусочек через трогательных краями двух масок:

				
					.view-ninth .content{
 background: rgba(0,0,0,0.9);
 height: 0px;
 opacity: 0.5;
 width: 361px;
 overflow: hidden;
 transform: rotate(-33.5deg) translate(-112px,166px);
 transform-origin: 0% 100%;
 transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2{
 background: transparent;
 margin-top: 5px;
 border-bottom: 1px solid rgba(255,255,255,0.2);
}
.view-ninth a.info{
 display: none;
}

При наведении курсора, мы сделаем содержание выйти из гнезда и сделать маски коснуться по краям:

				
					.view-ninth:hover .content{
height: 120px;
width: 300px;
opacity: 0.9;
top: 40px;
transform: rotate(0deg) translate(0px,0px);
}
.view-ninth:hover .mask-1,
.view-ninth:hover .mask-2{
transition-delay: 0s;
}
.view-ninth:hover .mask-1{
transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
transform: rotate(56.5deg) translateX(-1px);
}

Мы установки переходного задержки для масок таким образом, что при наведении, переход происходит мгновенно. Но при движении с помощью мыши, задержка будет больше, так как если его «ждет» содержание, чтобы вернуться в гнездо.

Пример 10

В последнем примере, мы будем увеличивать изображения и сделать его исчезать, а чего descpription на фронт. Мы можем сделать это, используя шкалу преобразования и установив уровень непрозрачности:

				
					.view-tenth img {
 transform: scaleY(1);
 transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
 background-color: rgba(255, 231, 179, 0.3);
 transition: all 0.5s linear;
 opacity: 0;
}
.view-tenth h2{
 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 background: transparent;
 margin: 20px 40px 0px 40px;
 transform: scale(0);
 color: #333;
 transition: all 0.5s linear;
 opacity: 0;
}
.view-tenth p {
 color: #333;
 opacity: 0;
 transform: scale(0);
 transition: all 0.5s linear;
}
.view-tenth a.info {
 opacity: 0;
 transform: scale(0);
 transition: all 0.5s linear;
}

При наведении курсора, мы просто масштабировать изображение вверх и исчезают его, уменьшая его непрозрачность до 0:

				
					.view-tenth:hover img {
transform: scale(10);
opacity: 0;
}
.view-tenth:hover .mask {
opacity: 1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{
transform: scale(1);
opacity: 1;
}

Скачать код

Вывод

CSS3 имеет действительно большой потенциал для создания замечательных эффектов. Вскоре мы надеемся, будет в состоянии избежать использования JavaScript для простых эффектов и полагаться на 100% на CSS, в всех браузерах.
Я надеюсь, что Вам понравились эти эксперименты, но, прежде всего, я надеюсь, что они могут вдохновить вас для ваших проектов.

Свежие записи

Обновленная Windows Phone позволит разработчикам блокировать звонки и SMS

Фирменные смартфоны фирмы Нокиа, которые вышли послединими Nokia Lumia 925

Материнская плата

Эта плата, та основа с помощью которой объединяются и совместно

Команда RD

Команда RD и RMDIR позволяют удалять как каталоги, так и

Фильтр «Яндекса» АГС и способы вывода из него сайта

АГС является фильтром, который используется в поисковой системе «Яндекс». Этот

Как проверить оперативную память в Windows 7 на наличие ошибок

Иногда бывает такое, что некоторые программы по какой то непонятной

Дефрагментация диска — решение скорости

Дефрагментация диска может быть идеальным решением для вашей системы, когда

Браузер Google Chrome может выйти на Windows Phone

Операционная система Windows Phone считается самой удобной, но к сожалению

Как выгодно купить новый компьютер

Здравствуйте уважаемый посетитель, если вы собрались покупать новый компьютер, то

Хромбук Toshiba Chromebook оценили в 280 долларов

Компания Toshiba разработала и с сегодняшнего дня выпустила в продажу

Скоро ноутбуки получат универсальный стандарт для зарядников

Казалось – бы совсем недавно, всего несколько лет назад, когда

Web-Дизайн

Новостная лента / лента статей / лента анонсов статей в CMS Drupal

Для создания новостной ленты используем таксономию. Таксономия предназначена для упорядочивания статей сайта в независимости от того, к какому типу материала принадлежит статья. Для этого перейдём

Web-Дизайн

Как настроить плагин Hyper Cache и кэширование сайта

Оглавление Кэширование сайта и плагин Hyper Cache Кэширование – это то, чем нужно заниматься на сайте постоянно, т.к. увеличение числа посетителей на сайте (трафик) оказывает нагрузку

Оборудование

GTX 1050 Ti и GTX 1650 cравнение видеокарт

GTX 1050 Ti vs GTX 1650 Сравниваем! Оглавление NVIDIA GeForce GTX 1050 Ti Требования к мощности являются разумными, и это очень эффективно по сравнению с

Настройка

Разгон видеокарты с помощью программы MSI Afterburner

Оглавление Разгон видеокарты. Инструкция по MSI Afterburner Cегодня рассмотрим разгон видеокарты. Инструкцию к применению с помощью программы MSI Afterburner. Подробный обзор данной программы будет обязательно

Интернет

Как сделать рерайт текста и не облажаться

Рерайт текста не только поможет начинающим блоггерам обрести опыт в написании статей для собственного блога, но это и способ заработка в интернете. Меня иногда спрашивают начинающие

Программы

Установка Интернет Контроль Сервис на VirtualBox

VirtualBox (Oracle VM VirtualBox) — программный продукт виртуализации для операционных систем Microsoft Windows, Linux, FreeBSD, Mac OS X, Solaris/OpenSolaris, ReactOS, DOS и других, разработанный компанией Innotek, в настоящее

Оборудование

Что лучше Ipad 3 или Galaxy Tab 2

Часто борьба между двумя крупными компаниями покупателя загоняет в тупик. Главным образом я хочу попробовать поставить всё на места с двумя новыми и самыми спрашиваемыми

Web-Дизайн

Social Up: социальная сеть и интернет бизнес онлайн

Social Up – cсоциальная сеть и онлайн заработок в интернете. Social Up – это не только социальная сеть, но и онлайн заработок в интернете, т.е.