CODEWITHSUNDEEP
htmlcssfrontend
iamtheasad
iamtheasad

Reputation: 1127

While I hove on image hover effect are not showing. Also I can use overlay on image

I want to add hover effect while I hover on image 

.team_list h4, 
 .team_list p {
   visibility: hidden;
 }
 .team_list img:hover .team_list h4,
 .team_list img:hover .team_list p {
   visibility: visible;
}
<div class="team_list">
         <span>
            <img src="images/team/team_1.jpg" alt="Team Person" />
            <h4>Kazi Erfan</h4>
            <p>UI/UX Designer</p>
         </span>
         <span>
            <img src="images/team/team_2.jpg" alt="Team Person" />
            <h4>Kazi Erfan</h4>
            <p>UI/UX Designer</p>
         </span>
         <span>
            <img src="images/team/team_3.jpg" alt="Team Person" />
            <h4>Kazi Erfan</h4>
            <p>UI/UX Designer</p>
         </span>
         <span>
            <img src="images/team/team_4.jpg" alt="Team Person" />
            <h4>Kazi Erfan</h4>
            <p>UI/UX Designer</p>
         </span>
         <span>
            <img src="images/team/team_5.jpg" alt="Team Person" />
            <h4>Kazi Erfan</h4>
            <p>UI/UX Designer</p>
         </span>
      </div>

How to add a hover effect on the image? I tried so many ways please see the code.

For Code- https://github.com/iamtheasad/Bino-l-p

For Live Website- https://iamtheasad.github.io/Bino-l-p/

Codepend: https://codepen.io/aasaadzaman5/pen/PowxrVp

Upvotes: 0

Views: 93

Answers (2)

iamtheasad
iamtheasad

Reputation: 1127

Changed this code - 

.team_list h4,
.team_list p {
   opacity: 0;
   transition: .2s;
}

.team_list img:hover ~ h4,
.team_list img:hover ~ p {
   opacity: 1;
}

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13417

Change the styles on hover like shown below

.team_list img:hover {
  opacity: 0.5;  
}
.team_list img:hover ~ h4,
.team_list img:hover ~ p {
   visibility: visible;
}


/************************************** 
     Our Team Section Start
***************************************/
.our_team_bg {
   background-image: url(https://cdn.pixabay.com/photo/2020/01/14/11/00/nubian-ibex-4764738_960_720.jpg);
   overflow: hidden;
   height: 744px;
  background-repeat: no-repeat;
  width: 100%;
}

.our_team_bg:after {
   content: '';
   position: absolute;
   background-color: #202020;
   width: 100%;
   height: 100%;
   top: 0%;
   left: 0%;
   opacity: .75;
   z-index: -1;
}

.our_team_top h2,
.our_team_top p {
   color: #fff;
}

.our_team_transparent_bg {
   background-image: url(https://cdn.pixabay.com/photo/2020/01/07/00/34/heron-4746555_960_720.jpg);
   position: absolute;
   bottom: -7%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-position: center;
}

.team_list img {
   border-radius: 50%;
   border: 4px solid #e74c3c;
   z-index: 1;
  width: 100px;
  height: 100px;
}

.team_list {
   max-width: 1170px;
   margin: 0 auto;
   text-align: center;
}

.team_list span:nth-child(1) {
   position: absolute;
   top: 57%;
   left: 12%;
}

.team_list span:nth-child(2) {
   position: absolute;
   top: 51%;
   right: 64%;
}

.team_list span:nth-child(2) h4:after {
   top: 52%;
}

.team_list span:nth-child(3) {
   position: absolute;
   top: 52%;
   left: 48%;
}

.team_list span:nth-child(4) {
   position: absolute;
   top: 57%;
   left: 65%;
}

.team_list span:nth-child(5) {
   position: absolute;
   top: 53%;
   right: 7%;
}

.team_list h4:after {
   position: absolute;
   background: #675b5b;
   width: 50px;
   height: 1px;
   display: block;
   content: '';
   transform: rotate(90deg);
   top: 44%;
   left: 28%;
}

.team_list h4 {
   font-size: 24px;
   margin-top: 80px;
   color: #e74c3c;
   font-weight: 600;
   font-family: 'Open Sans', sans-serif;
}

.team_list p {
   font-family: 'Open Sans', sans-serif;
   font-weight: 500;
}

.team_list h4, 
.team_list p {
   visibility: hidden;
}

.team_list img:hover {
  opacity: 0.5;  
}
.team_list img:hover ~ h4,
.team_list img:hover ~ p {
   visibility: visible;
}

/************************************** 
     Our Team Section End
***************************************/
<meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   
   <!-- Favicon Link -->
   <link rel="icon" href="favicon-32x32.png" type="image/gif">

   <title>The Ham Landing Page</title>

   <!-- CSS Links -->
   <link rel="stylesheet" href="assets/css/all.min.css"> <!-- font awesome css link --> 
   <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
   <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">  <!-- bootstrap css CDN -->
   <link rel="stylesheet" href="assets/css/bootstrap.min.css">
   <link rel="stylesheet" href="assets/css/style.css">
   <link rel="stylesheet" href="assets/css/responsive.css">



<!-- Our Team Section Start -->
   <section id="custom_width" class="defualt_padding our_team_bg">
      <div class="container">
         <div class="row">
            <div class="col-xl-6 offset-md-3 text-center">
               <div class="recent_work_top our_team_top">
                  <h2>OUR TEAM</h2>
                  <p>
                     Meet the craziest team. Share your thoughts with them.
                  </p>
                  <div class="header_bars recent_work_bar">
                     <div class="header_bar_1"></div>
                     <div class="header_bar_2"></div>
                     <div class="header_bar_3"></div>
                  </div>
               </div>
            </div>
         </div><!-- row / -->
      </div><!-- container / -->

      <div class="our_team_transparent_bg"></div>

      <div class="team_list">
         <span>
            <img src="https://cdn.pixabay.com/photo/2020/01/07/00/34/heron-4746555_960_720.jpg" alt="Team Person" />
            <h4>Kazi Erfan</h4>
            <p>UI/UX Designer</p>
         </span>
         <span>
            <img src="https://cdn.pixabay.com/photo/2020/01/07/00/34/heron-4746555_960_720.jpg" alt="Team Person" />
            <h4>Kazi Erfan</h4>
            <p>UI/UX Designer</p>
         </span>
         <span>
            <img src="https://cdn.pixabay.com/photo/2020/01/07/00/34/heron-4746555_960_720.jpg" alt="Team Person" />
            <h4>Kazi Erfan</h4>
            <p>UI/UX Designer</p>
         </span>
         <span>
            <img src="https://cdn.pixabay.com/photo/2020/01/07/00/34/heron-4746555_960_720.jpg" alt="Team Person" />
            <h4>Kazi Erfan</h4>
            <p>UI/UX Designer</p>
         </span>
         <span>
            <img src="https://cdn.pixabay.com/photo/2020/01/07/00/34/heron-4746555_960_720.jpg" alt="Team Person" />
            <h4>Kazi Erfan</h4>
            <p>UI/UX Designer</p>
         </span>
      </div>
   </section> <!-- Our Team Section End -->



 <!-- Javascript Links -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 
   <script src="assets/js/jquery-3.4.1.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="assets/js/bootstrap.min.js"></script>
   <script src="assets/js/owl.carousel.min.js"></script>
   <script src="https://kit.fontawesome.com/41baba5a65.js" crossorigin="anonymous"></script><!-- font awesome CDN js link -->
   <script src="assets/js/all.min.js"></script> <!-- font awesome js link -->
   <script src="assets/js/script.js"></script>

Upvotes: 1

Related Questions