Появление надписи при наведении на элемент

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

HTML

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

Код
<ul class="grid cs-style-1">
  <li>
  <figure>
  <img src="images/1.png" alt="img01">
  <figcaption>
  <h3>Камера</h3>
  <span>Jacob Cummings</span>
  <a href="http://dribbble.com/shots/1115632-Camera">Взгляните</a>
  </figcaption>
  </figure>
  </li>
  <li>
  <figure>
  <!-- ... -->
  </figure>
  </li>
  <!-- ... -->
</ul>

Это стандартная структура для всех примеров. Обратите внимание, что для эффекта 4 у нас будет разделение вывода дополнительных упаковок изображения.
Класс для каждого отдельного эффект будет добавлен в список, так на примере 1 будет иметь "cs-style-1", пример 2 будет иметь "cs-style-2" и так далее. Вот как мы определим влияние стилей для каждого отдельного примера.

CSS

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

Код
.grid {
  padding: 20px 20px 100px 20px;
  max-width: 1300px;
  margin: 0 auto;
  list-style: none;
  text-align: center;
}
   
.grid li {
  display: inline-block;
  width: 440px;
  margin: 0;
  padding: 20px;
  text-align: left;
  position: relative;
}

Cписок с пунктами отображается как встроенные блоки , что позволят нам центрировать их.
Давайте сбросим отступы figure элементов и установим относительное позиционирование. Наши figcaption будет позиционироваться абсолютно, поэтому мы должны убедиться, что он будет делать это Внутри блока:

Код
.grid figure {
  margin: 0;
  position: relative;
}

Изображение будет иметь максимальную ширину 100%, что будет очень кстати, когда мы определим медиа запрос, чтобы изменить размеры элементов списка:

Код
.grid figure img {
  max-width: 100%;
  display: block;
  position: relative;
}

Figcaption будет позиционироваться абсолютно. По умолчанию он будет позиционироваться в верхнем левом углу. 

Код
.grid figcaption { 
  position: absolute; 
  top: 0; 
  left: 0; 
  padding: 20px; 
  background: #2c3f52; 
  color: #ed4e6e; 
}

И, наконец, давайте определим некоторые стили для текстовых элементов и ссылок: 

Код
.grid figcaption h3 { 
  margin: 0;
  padding: 0;
  color: #fff;
}
   
.grid figcaption span:before {
  content: 'by ';
}  
.grid figcaption a {
  text-align: center;
  padding: 5px 10px;
  border-radius: 2px;
  display: inline-block;
  background: #ed4e6e;
  color: #fff;
}

В конце нашей CSS мы также добавим медиа запрос для небольших экранов:

Код
@media screen and (max-width: 31.5em) {
  .grid {
  padding: 10px 10px 100px 10px;
  }
  .grid li {
  width: 100%;
  min-width: 300px;
  }
}

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


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

Код
.cs-style-1 figcaption {
  height: 100%;
  width: 100%;
  opacity: 0;
  text-align: center;
  backface-visibility: hidden;
  transition: transform 0.3s, opacity 0.3s;
}

При наведении мы установим непрозрачность до 1 и немного трансформируем figcaption:

Код
.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
  opacity: 1;
  transform: translate(15px, 15px);
}

Кроме того, мы будем позиционировать элементы текста:

Код
.cs-style-1 figcaption h3 {
  margin-top: 70px;
}
   
.cs-style-1 figcaption span {
  display: block;
}
   
.cs-style-1 figcaption a {
  margin-top: 30px;
}

Так же, в архиве лежите еще 6 замечательных эффектов для ваших проектов. Вам нужно всего лишь их установить!

  • FalleN

  • 6283

  • 1

  • 260

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!