在此輸入圖像描述-& gt；在此輸入圖像描述

用CSS懸停效果增強(qiáng)團(tuán)隊(duì)成員圖像-需要幫助！

懸停時(shí)團(tuán)隊(duì)名稱從下向上滑動(dòng)，懸停后名稱顏色名稱和背景顏色會(huì)改變。 我想在elementor或wordpress中使用

我想在懸停之前，團(tuán)隊(duì)名稱字體顏色為紅色，背景顏色為白色，然后在懸停之后，團(tuán)隊(duì)名稱顏色為白色，背景顏色為紅色，在懸停之后，團(tuán)隊(duì)名稱頂部和社交媒體鏈接在底部，社交媒體的背景顏色為白色，社交媒體圖標(biāo)顏色為紅色。

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');
.team{
   padding-bottom:70px;
   font-family:'Poppins', sans-serif
}
.team .section-title{
  margin-bottom:50px;
}
.team_title h4{
  color:black;
}
.team__item{
  height:480px;
  position:relative;
  z-index:1;
  margin-bottom:30px;
  overflow:hidden;
  background-position:center;
  background-image: url('http://localhost/gym01/wp-content/uploads/2023/05/Rectangle-60.png');
  height: 400px;
  width: 500px;
 
}
.team__item:after{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  background:red;
  content:"";
  z-index:-1;
  opacity:0;
  -webkit-transition:all,0.5s,ease-out,.5s;
  -o-transition:all,0.5s,ease-out,.5s;
  transition:all,0.5s,ease-out,.5s}
.team__item:hover:after{
  opacity:1
}
.team__item:hover .team__text{top:0}
.team__item:hover .team__text .team__title{
  
  padding:0 0 10px;
  margin-bottom:40px;
  opacity:0;
  visibility:hidden;
  position:relative;
  bottom:initial;
  opacity:1;
  visibility:visible
}
.team__item:hover .team__text p{
  top:0;
  opacity:1;
  visibility:visible;
  -webkit-transition:all .5s ease .3s;
  -o-transition:all .5s ease .3s;transition:all .5s ease .3s
}
.team__item:hover .team__text .team__social{
  opacity:1;
  visibility:visible;
  bottom:34px;
  -webkit-transition:all .5s ease .5s;
  -o-transition:all .5s ease .5s;
  transition:all .5s ease .5s
}
.team__text{
  height:100%;
  top:361px;
  position:relative;
  padding:35px 30px 30px;
  -webkit-transition:.5s;
  -o-transition:.5s;
  transition:.5s
}
.team__text .team__title{
  
  padding:0 0 26px;
  margin-bottom:26px;
  position:relative
}
.team__text .team__title h4{
  color:#fff;
  font-weight:700;
  margin-bottom:6px
}
.team__text .team__title span{
  font-size:15px;
  color:#88C417
}
.team__text p{
  color:#e4e4e4;
  line-height:26px;
  opacity:0;
  visibility:hidden;
  position:relative;
  top:50px;
  -webkit-transition:all .3s;
  -o-transition:all .3s;
  transition:all .3s
}
.team__text .team__social{
  position:absolute;
  top:280px;
  margin-top:50px;
  left:0;
  width:100%;
  height:50%;
  padding:30px;
  background:white;
  opacity:0;
  visibility:hidden;
}
.team__text .team__social a{
  display:inline-block;
  font-size:40px;
  color:red;
  margin-right:90px;
  -webkit-transition:all,.3s;
  -o-transition:all,.3s;
  transition:all,.3s
}
.team__text .team__social a:last-child{margin-right:0}
.team__text .team__social a:hover{color:red}
@media(max-width:768px) {
  .team__item{height:250px}
  .team__text{padding:50px}
}

<div class="container">
  <div class="row">
    <!-- Single Starts  -->
      <div class="col-lg-4 col-md-6">
      <div class="team__item set-bg">
        <div class="team__text">
          <div class="team__title">
            <h4><center>"MAX JOFFMAN"</center></h4>
            
          </div>
          <div class="team__social">
            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-instagram"></i></a>
          </div>
        </div>
      </div>
    </div>
    <!-- Single Ends    -->
  </div>
</div>