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

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

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

Оглавление

HTML разметкa

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

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

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

				
					<div class="view">  
     <img decoding="async" src="image.gif" />  
     <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-firstview-secondview-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" />
 <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" />
<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, в всех браузерах.
Я надеюсь, что Вам понравились эти эксперименты, но, прежде всего, я надеюсь, что они могут вдохновить вас для ваших проектов.

Свежие записи
Команда RD

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

Linux
help2site
Релиз новой версии TrueConf для Linux

Крупнейший разработчик индивидуальных и корпоративных продуктов видеоконференцсвязи в СНГ — компания «TrueConf», недавно усовершенствовало свое приложение TrueConf для Linux 1.0.5, которое позволило поддерживать такие дистрибутивы

Web-Дизайн
help2site
Что такое IDE и зачем это нам нужно

К моменту прочтения этой статьи вы уже были должны установить и настроить Apache, установить и настроить PHP как модуль Apache и установить и настроить MySQL. «Пора бы уже и

Программы
help2site
Бесплатные приложения для ipad mini

Сегодня я желаю вам рассказать немного про Бесплатные приложения на ipad . Многие сайты выкладывают данные приложения в итоге при загрузке они требуют активации, и у меня

Web-Дизайн
help2site
Перезагрузка Apache в Windows

В этой заметке я расскажу вам, как перезагрузить Apache в Windows не с помощью командной строки, а с использованием интерфейса Windows. Я считаю, что для

Web-Дизайн
help2site
Вкладки (Табы/Tabs) на чистом CSS

Вкладки (Табы/Tabs) на чистом CSS с интересным эффектом появления — исчезновения, из минусов высоту вкладки нужно задавать в ручную. Идея построения закладок на одном CSS

Ремонт
help2site
Как восстановить исцарапанный CD-DVD диск

Исцарапали диск, и компьютер перестал читать его? А на диске важная информация? Восстановите диск за 17 минут! Вы часто кидаете диски на не предназначенные места.

Windows
help2site
Отключаем всплывающие подсказки Windows

Операционная система Windows 7 устроена так, что зачастую пытается давать свои советы – как лучше пользоваться системой, по началу эти подсказки не заметны, однако опытных