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

Эффект FLEX появление текста при наведение CSS

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

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

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

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

Появление текста при наведении курсора на рисунок

Здесь проверено на работоспособность, где каждая функция отвечает за свои действие:

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

HTML

Код

<section class="setupag-redirectin">
  <div class="dmdomai-namebu">
  <div class="tukepinazakila"><img src="https://dwstroy.ru/lessons/les3698/demo/img/1.jpg" alt="Ключевые слова">
  <h3>Марина Сегум</h3>
  <p>Физрук</p>
  <ul>
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter-square"></i></a></li>
  <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  <li><a href="#"><i class="fa fa-instagram"></i></a></li>
  </ul>
  </div>
</section>

CSS

Код

.setupag-redirectin {
  margin-top: 100px;
}
.dmdomai-namebu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.tukepinazakila {
  overflow: hidden;
  height: 283px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: relative;
  margin: 6px;
  cursor:pointer
}

.tukepinazakila img {
  min-width: 100%;
  height: 100%;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}
.tukepinazakila:hover img {
  -webkit-transform: scale(1.2) rotate(-10deg);
  -moz-transform: scale(1.2) rotate(-10deg);
  -ms-transform: scale(1.2) rotate(-10deg);
  -o-transform: scale(1.2) rotate(-10deg);
  transform: scale(1.2) rotate(-10deg);
  filter: grayscale(.75);
}
.tukepinazakila h3, .tukepinazakila p {
  position: absolute;
  -webkit-transition: .7s;
  -moz-transition: .7s;
  -ms-transition: .7s;
  -o-transition: .7s;
  transition: .7s;
  color: #f3f1f1;
  background-color: rgba(12, 12, 12, 0.43);
  padding: 6px 20px;
  margin: 0;
  border-left: 2px solid #c5bdbd;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
.tukepinazakila h3 {
  top: 45%;
  font-size: 1.2rem;
}
.tukepinazakila p {
  top: 34%;
  font-size: 0.8rem;
}
.tukepinazakila:hover h3,
.tukepinazakila:hover p {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  margin-left: 9px;
}
.tukepinazakila ul {
  padding: 0;
  margin: 0;
  display: flex;
  background: rgba(19, 18, 18, 0.24);
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
.tukepinazakila ul li {
  list-style: none;
  width: 19%;
  text-align: center;
}
.tukepinazakila ul li a {
  color: #f7f5f5;
  display: block;
  padding: 9px;
}
.tukepinazakila ul li:hover:nth-child(1) {
  background: #4f6aa9;
}
.tukepinazakila ul li:hover:nth-child(2) {
  background: #2d85c7;
}
.tukepinazakila ul li:hover:nth-child(3) {
  background: #bd301d;
}
.tukepinazakila ul li:hover:nth-child(4) {
  background: #08608e;
}
.tukepinazakila ul li:hover:nth-child(5) {
  background: #7e2ead;
}
.tukepinazakila:hover ul {
  -webkit-transform: translateY(-135%);
  -moz-transform: translateY(-135%);
  -ms-transform: translateY(-135%);
  -o-transform: translateY(-135%);
  transform: translateY(-135%);
}

/*==== MEDIA ====*/
.setupag-redirectin {
  margin-top: 50px;
}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
  .setupag-redirectin {
  margin-top: 19.8px;
  }
  .tukepinazakila {
  height: 370px;
  }
  .tukepinazakila h3 {
  font-size: 1.4rem;
  top: 47%;
  }
  .tukepinazakila p {
  font-size: 1rem;
  }
  .tukepinazakila ul li a {
  font-size: 22px;
  }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 320px) {
  .tukepinazakila {
  height: 270px;
  }
  .tukepinazakila h3 {
  font-size: 1.1rem;
  top: 45%;
  }
  .tukepinazakila p {
  font-size: 0.9rem;
  }
  .tukepinazakila ul li a {
  font-size: 15px;
  }
}

Чтоб понять работу, то предоставлена Demo страница, где изначально поставлено несколько вариантов, а одну колонку. Что при смени фона, такой стиль отлично подстраивается, как на светлом, так и на темном.

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

Демонстрация

05 Августа 2018 Просмотров: 1682 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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