hover function not able to implement when I click on the image

user_9726561 0
Viewed 71

I came across a hover menu and trying to implement but not able to get the desired effect. On Click on the company logo, a dropdown should appear.

enter image description here

my code:

.client-container{
  position: relative;
  display: inline-block;
}

.client-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  top:0;
  transition:337ms ease-in-out;
}

.client-container:hover .client-content {
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 mt-5">
      <h2 class="text-center">Our Clients</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 text-center client-container">
      <img src="http://pngimg.com/uploads/sony_logo/sony_logo_PNG2.png" width="100" height="80">
      <div class="client-content p-4">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/tracfone-1.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/health.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/Homepage_slice_4_logo3_color.png">
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 text-center">
      <img src="images/Homepage_slice_4_logo2_color.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/Cnetric_Client_Logo_DKSH-1.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/Cnetric_Client_Logo_david-jones-1.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/canon.png">
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 text-center">
      <img src="images/roche.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/coles.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/Cnetric_Client_Logo_helicord.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/telstra.png">
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12 text-center text-center">
      <button class="btn btn-warning">All Clients</button>
    </div>
  </div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Can anybody help me in this issue.In my case hover menu is coming but its hiding the logo.I'm did try with z index but still nothing is happening. It's totally hidden. I'm totally out in the dark how to proceed with this one.Thank You

css html
3 Answers

Just remove the position absolute;

.client-container{
  position: relative;
  display: inline-block;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  top:0;
  background-color: #fff;
  transition:337ms ease-in-out;
  min-height: 80px;
  
}

.client-content {
  display: none;
  min-width: 160px;
}

.client-container:hover .client-content {
  display: block;
}

.client-container:hover {
    position: absolute;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 mt-5">
      <h2 class="text-center">Our Clients</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 text-center client-container">
      <img src="http://pngimg.com/uploads/sony_logo/sony_logo_PNG2.png" width="100" height="80">
      <div class="client-content p-4">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/tracfone-1.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/health.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/Homepage_slice_4_logo3_color.png">
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 text-center">
      <img src="images/Homepage_slice_4_logo2_color.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/Cnetric_Client_Logo_DKSH-1.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/Cnetric_Client_Logo_david-jones-1.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/canon.png">
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 text-center">
      <img src="images/roche.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/coles.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/Cnetric_Client_Logo_helicord.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/telstra.png">
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12 text-center text-center">
      <button class="btn btn-warning">All Clients</button>
    </div>
  </div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

user_60345220

Just change top:0 in your code.

.client-container{
  position: relative;
  display: inline-block;
}

.client-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  top: 80px; /* img's height */
  left: 0;
  width: 100%;
  transition:337ms ease-in-out;
}

.client-container:hover .client-content {
  display: block;
}

/* i added border for reference */
.client-container:hover, .client-content{border: 1px solid}.client-container:hover{border-bottom-color:transparent}.client-content{border-top-color:transparent}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 mt-5">
      <h2 class="text-center">Our Clients</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 text-center client-container">
      <img src="http://pngimg.com/uploads/sony_logo/sony_logo_PNG2.png" width="100" height="80">
      <div class="client-content p-4">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/tracfone-1.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/health.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/Homepage_slice_4_logo3_color.png">
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 text-center">
      <img src="images/Homepage_slice_4_logo2_color.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/Cnetric_Client_Logo_DKSH-1.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/Cnetric_Client_Logo_david-jones-1.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/canon.png">
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 text-center">
      <img src="images/roche.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/coles.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/Cnetric_Client_Logo_helicord.png">
    </div>
    <div class="col-lg-3 text-center">
      <img src="images/telstra.png">
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12 text-center text-center">
      <button class="btn btn-warning">All Clients</button>
    </div>
  </div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

user_107388060

Try This:

.client-container{
  position: relative;
  display: inline-block;
}

.client-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  top:0;
  transition:337ms ease-in-out;
}

.client-container:hover .client-content {
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 mt-5">
      <h2 class="text-center">Our Clients</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/5.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/5.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
          et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
        <a class="btn btn-custom">Read More</a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12 text-center text-center">
      <button class="btn btn-warning">All Clients</button>
    </div>
  </div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

user_84768300
Related