ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект при наведении на изображения на CSS

Эффект при наведении на изображения на CSS

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

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

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

Расмотрим как идет рабочий процесс:

Это по умолчанию:

Когда клик наведете:

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

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

HTML

Код

<a href="http://zornet.ru" target="_blank">
<div class="nugarumicta">
<img src="https://image.prntscr.com/image/qtOGqhXERlGsYm_jjrs-IA.png" alt="">
<div class="zornet_ru_gerda">
<p class="tumokaserna">Ваше оригинальное или тематическое описание.<p>Здесь идет вторая строка</p>
</div>
</div>
</a>

CSS

Код

.nugarumicta {
position:relative;
overflow:hidden;
border-radius: 5px;
width:553px;
height:257px;
}
.nugarumicta .zornet_ru_gerda {
  width: 553px;
  height: 257px;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -257px;
  border-radius: 5px;
  background-color: rgba(16, 16, 16, 0.69);
  -webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
  box-shadow: inset 0px 0px 4px 3px rgba(243, 238, 238, 0.64);
}
.nugarumicta:hover .zornet_ru_gerda {
margin-top:0;

  margin: 0 auto 0 auto;
  font-family: "james_star", Arial, sans-serif;
  color: #FBFE8B;
  font-weight: normal;
  font-style: normal;
  text-align: center;
  font-size: 19px;

}
.tumokaserna
padding-top: 49px;
}
.zornet_ru_gerda
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

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

В нашем случай только вывод начало статьи или описание.

23 Декабря 2017 Просмотров: 1806 Комментариев: (0)

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

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

Kosten

Комментарии: 0