JSFiddle - React, Tailwind, and code Playground

HTML

<div class="belowcont">
         <div class="circles">
         <img class="circleimg" src="http://lorempixel.com/output/sports-q-c-180-180-3.jpg"/>
         <p class="circletext"> Multi Award Winning Film </p>
         </div>
         <div class="circles">
         <img class="circleimg" src="http://lorempixel.com/output/food-q-c-180-180-1.jpg" />
         <p class="circletext"> A Story Of Shanes Life </p>
         </div>
         <div class="circles">
         <img class="circleimg" src="http://lorempixel.com/output/abstract-q-c-180-180-3.jpg"/>
         <p class="circletext">Set In The East Midlands </p>
         </div>
    </div>

CSS

.belowcont {
           width:100%;
           height:200px;
           border:1px dashed black;
           margin-top:2px
           }

.circles {
         width:180px;
         height:180px;
         background:url(circles.png);
         background-size:100% ;
         background-image:no-repeat;;
         border-radius:50%;
         margin-left:120px;
         margin-top:10px;
         float:left;
         margin-left:120px;
         margin-top:10px;
      position: relative;
         }

.circleimg {
           width:180px;
           height:180px;
           border-radius:50%;
    z-index: -10;
            }

   

.circleimg:hover ~ .circletext{
          opacity: 1;
    transition: opacity 1s;

            }    




.circletext {
             color:white;
             width:160px;
             text-align:center;
              position: absolute;
            top: 80px;
    opacity: 0;
            z-index: 10;
            }