Post to admins

Post to admins

Hi learners and admins. There's a big problem jquery's with css. I'll share code and I want to run the code yourself. you'll see the problem. 

      CSS
  1. .box .bio {
  2. position: absolute;
  3. top: 400px;
  4. left: 20px;
  5. text-decoration: none;
  6. color: #fff;
  7. padding: 10px 15px;
  8. border:1px solid #fff;
  9. background-color: rgba(250,250,250, 0.3);
  10. box-shadow: 0 0 4px rgba(0,0,0, 0.5);
  11. border-radius: 5px;
  12. transition: all 0.2s ease-in-out;
  13. display: none;
  14. }
  15. .box .bio:hover {
  16. background-color: transparent;
  17. }
      HTML
  1. <div class="box">
  2. <img src="img.jpg" class="img">
  3. <a href="" class="bio">Biography</a>
  4. <ul>
  5. <li><i class="fas fa-user-circle"></i><span>Aysha Mamedi</span></li>
  6. <li><i class="fas fa-map-marker-alt"></i><span>New York</span></li>
  7. <li><i class="fas fa-star-of-life"></i><span>Software Engineer</span></li>
  8. <li><i class="fas fa-hourglass-start"></i><span>20</span></li>
  9. <li><i class="fas fa-file-signature"></i><span>aysha@mamedi.com</span></li>
  10. </ul>
  11. </div>
  12.       
Script (JQuery )
  1. <script type="text/javascript">      
  2.     $(document).ready(function(){
  3.         $("img").hover(function(){
  4.             $("a.bio").slideToggle(300);
  5.         }).mouseleave(function(){
  6.             $("a.bio").slideUp(300);
  7.         });
  8.     });
  9. </script>
Wait your answers and solves.