» »

Эффект изображения с выводом заголовка CSS

Эффект изображения с выводом заголовка CSS

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

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

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

Так будет выглядеть:

Эффект изображения с появлением заголовка на CSS

Здесь показано с Demo страницы, это при открытие сайта.

Красивая анимация эффекта для сайта

Такой вид при наведение курсора, где появляется иконка или кнопка, где по центру выставлен шрифтовой знак, и также 2 значение под различные название.

Эффект при наведение картинки

Приступаем к установки:

HTML

Код
<figure class="nalotadunesob">
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/gandex.ru-26_7fa356690c80b2360f124-R0rOT.jpg" alt="zornet.ru" />
  <figcaption>
  <div class="magevekun">
  <h3>ZORNET</h3>
  </div>
  <div class="gasetolpan">
  <h3 class="palitrag">world</h3>
  </div>
  </figcaption>
  <div class="netraledam"><i class="ion-ios-loop-strong"></i></div>
  <a href="#"></a>
</figure>

CSS

Код
figure.nalotadunesob {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 215px;
  max-width: 297px;
  max-height: 214px;
  width: 100%;
  background: #0a0a0a;
}
figure.nalotadunesob img {
  opacity: 1;
  width: 100%;
  position: relative;
  -webkit-transition: opacity 0.40s;
  transition: opacity 0.40s;
}
figure.nalotadunesob .netraledam {
  border-radius: 5px;
  display: block;
  content: '';
  position: absolute;
  background-color: #191818;
  top: 49%;
  left: 49%;
  height: 68px;
  width: 68px;
  box-shadow: 0 0 9px rgba(14, 14, 14, 0.88);
  opacity: 0;
  text-align: center;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  transform: translate(-50%, -50%) rotate(0deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
figure.nalotadunesob .netraledam i {
  font-size: 35px;
  padding: 5px;
  color: #f7f7f7;
  line-height: 68px;
  opacity: 0.7;
}
figure.nalotadunesob figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: left;
}
figure.nalotadunesob figcaption > div {
  float: left;
  height: 100%;
  overflow: hidden;
  width: 50%;
  position: relative;
}
figure.nalotadunesob figcaption a {
  opacity: 0.8;
}
figure.nalotadunesob figcaption a:hover {
  opacity: 1;
}
figure.nalotadunesob figcaption h3 {
  background-color: #252323;
  word-spacing: -0.1em;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1em;
  opacity: 0;
  position: absolute;
  -webkit-transition: opacity 0.40s, -webkit-transform 0.40s;
  transition: opacity 0.40s,-webkit-transform 0.40s,-moz-transform 0.40s,-o-transform 0.40s,transform 0.40s;
}
figure.nalotadunesob figcaption .magevekun h3 {
  border-radius: 3px 0 0 3px;
  top: 50%;
  padding: 4px 48px 3px 9px;
  right: 0;
  -webkit-transform: translate(100%, 0px);
  transform: translate(100%, 0px);
}
figure.nalotadunesob figcaption .gasetolpan h3 {
  border-radius: 0 3px 3px 0;
  bottom: 50%;
  padding: 4px 10px 4px 35px;
  padding-left: 30px;
  -webkit-transform: translate(-100%, 0px);
  transform: translate(-100%, 0px);
}
figure.nalotadunesob a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}

figure.nalotadunesob .palitrag {
  background-color: #f5f7f9;
  color: #0f304e;
}
figure.nalotadunesob:hover img,
figure.nalotadunesob.hover img {
  opacity: 0.5;
}
figure.nalotadunesob:hover figcaption .magevekun h3,
figure.nalotadunesob.hover figcaption .magevekun h3 {
  opacity: 1;
  -webkit-transform: translate(0%, 0px);
  transform: translate(0%, 0px);
}
figure.nalotadunesob:hover figcaption .gasetolpan h3,
figure.nalotadunesob.hover figcaption .gasetolpan h3 {
  opacity: 0.9;
  -webkit-transform: translate(0%, 0px);
  transform: translate(0%, 0px);
}
figure.nalotadunesob:hover .netraledam,
figure.nalotadunesob.hover .netraledam {
  opacity: 0.9;
  -webkit-transform: translate(-50%, -50%) rotate(40deg);
  transform: translate(-50%, -50%) rotate(40deg);
}

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

Демонстрация
24.09.2018 Просмотров: 204 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
CbIPoK2513
CbIPoK2513 24.09.2018 13:381
0
Чем-то напомнило игру Watch Dogs :D
Kosten
Kosten 24.09.2018 17:202
0
Вы что имеете виду, сам эффект или изображение, что на нем. Просто не шпилюс в игры, для меня не проходимый лес.)))
CbIPoK2513
CbIPoK2513 24.09.2018 19:443
0
Именно сам эффект при наведение)
Даже идея пришла, попробую что-нибудь сделать в стиле этой игры)
avatar