JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<section id="galery">
         <div class="galery-images">
           <a href="foto/demo.php">
               <img src="http://www.seznam.cz/st/img/2011//logo.png?3.33.85" alt="">
               <div class="galery-mouseenter">
                 <h3>Jana</h3>
                 <p>Letni mashup v galerii</p>
               </div>
           </a>
         </div>

         <div class="galery-images">
           <a href="foto/demo.php">
               <img src="http://www.seznam.cz/st/img/2011//logo.png?3.33.85" alt="">
               <div class="galery-mouseenter">
                 <h3>Jana</h3>
                 <p>Letni mashup v galerii</p>
               </div>
           </a>
         </div>

 </section>

CSS

galery{
   margin-top: 20px;
   width: 100%;
   height: auto;
 }
 .galery-images {
   width: 20%;
   height: 200px;
   margin-right: 4%;
   display: inline-block;
 }
 #galery img {
   width: 100%;
   height: 200px;
   border:2% solid #EEEEEE;
   border-bottom:5% solid #eeeeee;
 }
 .galery-mouseenter {
   display: none;
   z-index: 100;
   /*width: 100%;*/
   height: 200px;
   position: relative;
   top: -100px;
   background: rgba(0,0,0, 0.5);
   position:absolute;             /* dopsano*/
   top:0;                        /* dopsano*/
   /*margin-top: -205px;*/
 }
 #galery .last-picture {
   margin-right: 0;
 }

JavaScript

$(document).ready(function(){
       $('.galery-images').hover(function(){
               $(this).find('div').fadeToggle(200);
          
       });
});