Good evening! I really need help. I do not know how to implement this functionality.

enter image description here

I do not know how when you hover the mouse on the block, change the display of the content. When hovering, the left block should be displayed as right.

.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>

Here are the styles of the finished block. All that is missing is the background to add social icons to lower divas and an image on a white background. When you hover you need to change the border to red,

On the red color, the image on the red and give color to the icons.

  • add an element to the block that will only show when you hover. And there infu stuffed. No need to change the content, just show the second block which is hidden without guidance. - user190134
  • Could you show this code? I am in the layout recently, I do not quite understand how to make markup in HTML - Trofimchik Vlad
  • @TrofimchikVlad, drop the link to the styles or download it here and I'll show it. Tell me what styles should change when you hover - Yuri
  • @Yuri, added styles to the message. - Trofimchik Vlad
  • @TrofimchikVlad, you have a few styles that do not match the picture. Ok then. Make .about__our-team__item_2:hover h4 {...} , .about__our-team__item_2:hover .soc_icon-item_1 {...} . So change all the necessary styles. - Yuri

1 answer 1

To change when you hover on the parent there is a special entry. родитель: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>

  • Thank you very much. It helped a lot)) - Trofimchik Vlad
  • @TrofimchikVlad, you can accept my answer so that other users know what helped you :) - Yuri