0

Добрый вечер! Очень нужна помощь. Не знаю как реализовать данный функционал.

введите сюда описание изображения

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

.about__our-team {
  justify-content: space-around;
}

.about__our-team__item_1,
.about__our-team__item_2,
.about__our-team__item_3,
.about__our-team__item_4 {
  flex-basis: 250px;
  min-height: 398px;
  background-color: rgba(77, 63, 75, 0.5);
}

h4 {
  text-transform: uppercase;
  font-family: 'Lato';
  font-weight: bold;
  color: #fff;
  text-align: center;
}

p {
  color: #9ec36b;
  font-family: 'Lato';
  font-weight: lighter;
  text-align: center;
}

.our-team__image {
  border-radius: 50%;
  border-style: solid;
  border-width: 5px;
  border-color: #a1859e;
  background-color: #ffffff;
  width: 154px;
  height: 154px;
  margin: 50px auto;
}
<div class="about__our-team__item_2">
  <div class="our-team__image"></div>
  <h4>kiril donchev</h4>
  <p>Design Master</p>
  <div class="soc_icon flex">
    <div class="soc_icon-item_1"></div>
    <div class="soc_icon-item_2"></div>
    <div class="soc_icon-item_3"></div>
    <div class="soc_icon-item_4"></div>
  </div>
</div>

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

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

7
  • добавить в блок элемент, который при наведении только будет показываться. И туда инфу запихнут. Не надо изменять содержимое, просто показывать второй блок который без наведения скрыт.
    – user190134
    8 мар 2017 в 19:13
  • Не могли бы вы показать это кодом? Я в верстке недавно, не совсем понимаю как сделать разметку в HTML 8 мар 2017 в 19:23
  • @TrofimchikVlad, киньте ссылку на стили или сюда загрузите и я покажу. Ещё скажите, на какие стили должны изменятся при наведении
    – Yuri
    8 мар 2017 в 19:31
  • @Yuri, добавил стили в сообщение. 8 мар 2017 в 19:46
  • @TrofimchikVlad, у вас немного стили не соответствуют по картинка. Ну то ладно. Сделайте .about__our-team__item_2:hover h4 {...}, .about__our-team__item_2:hover .soc_icon-item_1 {...}. Так меняете все нужные стили.
    – Yuri
    8 мар 2017 в 19:51

1 ответ 1

2

Для изменения при наведении на родителя существует специальная запись. родитель:hover дочерний_элемент {...}

.about__our-team {
  justify-content: space-around;
}

.about__our-team__item_1,
.about__our-team__item_2,
.about__our-team__item_3,
.about__our-team__item_4 {
  flex-basis: 250px;
  min-height: 398px;
  background-color: rgba(77, 63, 75, 0.5);
}

h4 {
  text-transform: uppercase;
  font-family: 'Lato';
  font-weight: bold;
  color: #a1859e;
  text-align: center;
  transition: color 0.5s; /* Добавляем плавность */
}
/* Эффект при наведении */
.about__our-team__item:hover h4 {color: #fff;}

p {
  color: #9ec36b;
  font-family: 'Lato';
  font-weight: lighter;
  text-align: center;
  transition: color 0.5s; /* Добавляем плавность */
}
/* Эффект при наведении */
.about__our-team__item:hover p {color: #de5b63;}

.our-team__image {
  border-radius: 50%;
  border-style: solid;
  border-width: 5px;
  border-color: #a1859e;
  background-color: #ffffff;
  width: 154px;
  height: 154px;
  margin: 50px auto;
  transition: color 0.5s; /* Добавляем плавность */
}
/* Эффект при наведении */
.about__our-team__item:hover .our-team__image {border-color: #de5b63;}
<div class="about__our-team__item_2 about__our-team__item">
  <div class="our-team__image"></div>
  <h4>kiril donchev</h4>
  <p>Design Master</p>
  <div class="soc_icon flex">
    <div class="soc_icon-item_1"></div>
    <div class="soc_icon-item_2"></div>
    <div class="soc_icon-item_3"></div>
    <div class="soc_icon-item_4"></div>
  </div>
</div>

2
  • Спасибо огромное. Очень помогли)) 8 мар 2017 в 20:16
  • @TrofimchikVlad, можете принять мой ответ, чтобы другие пользователи знали, что вам помогло :)
    – Yuri
    8 мар 2017 в 20:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.