title: How to add text when hovering
body: <p><a href="https://codepen.io/dhanushbadge/pen/uJkcq" rel="nofollow noreferrer">https://codepen.io/dhanushbadge/pen/uJkcq</a></p>
  
  <p>Hi, my question is about adding adding icons and text when hovering at the img.
  When hovering it shows gray but I want it to also show with 3 icons and a text on top. I can't seem to add text inside the circle when hovering.
  The original code is in the link
  Please helppppppppp</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    font-size:62.5%;
  }
  body {
    margin:0;
    font-size:1.4rem;
    font-family:arial;
    background-color:#ddd;
  }
  img {
    border:0;
    width:100%;
    height:100%;
  }
  #team {
    max-width:96rem;
    width:100%;
    min-height:200px;
    height:auto;
    margin:0 auto;
    background-color:white;
    box-sizing:border-box;
    padding:0;
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
    -webkit-flex-direction:row;
    flex-direction:row;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-align-content:flex-end;
    align-content:flex-end;
  }
  figure {
    width:12.5rem;
    height:12.5rem;
    display:block;
    margin:0.5rem 1rem 4rem 0.5rem;
    padding:0;
    box-sizing:content-box;
    color:black;
  }
  figure img {
    -webkit-border-radius:50%;
    -moz-border-radius:50%;  
    border-radius:50%; 
  }
  #team figure img {
    -webkit-transition:opacity 0.26s ease-out;   
    -moz-transition:opacity 0.26s ease-out;   
    -ms-transition:opacity 0.26s ease-out;   
    -o-transition:opacity 0.26s ease-out;   
    transition:opacity 0.26s ease-out;
   
     
  }
  #team:hover img, #team:active img {
    opacity:1;
  }
  #team:hover img:hover, #team:active img:active   {
    opacity:0.3;
   
  }
  figcaption {
    font-size:1.2rem;
    text-align:center;
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="team"&gt;
    &lt;figure&gt;&lt;img src="http://500px.com/graphics/pages/team/squares/oleg.jpg"&gt;&lt;figcaption&gt;Oleg Gutsol&lt;/figcaption&gt;&lt;/figure&gt;
    &lt;figure&gt;&lt;img             src="http://500px.com/graphics/pages/team/squares/evgeny.jpg"&gt;&lt;figcaption&gt;Evgeny Tchebotarev&lt;/figcaption&gt;&lt;/figure&gt;
    &lt;figure&gt;&lt;img src="http://500px.com/graphics/pages/team/squares/dustin.jpg"&gt;&lt;figcaption&gt;Dustin Plett&lt;/figcaption&gt;&lt;/figure&gt;
    &lt;figure&gt;&lt;img src="http://500px.com/graphics/pages/team/squares/adam.jpg"&gt;&lt;figcaption&gt;Adam Shutsa&lt;/figcaption&gt;&lt;/figure&gt;
    &lt;figure&gt;&lt;img src="http://500px.com/graphics/pages/team/squares/roxy.jpg"&gt;&lt;figcaption&gt;Roxy Keshavarznia&lt;/figcaption&gt;&lt;/figure&gt;
    &lt;figure&gt;&lt;img src="http://500px.com/graphics/pages/team/squares/eric.jpg"&gt;&lt;figcaption&gt;Eric Akaoka&lt;/figcaption&gt;&lt;/figure&gt;
    &lt;figure&gt;&lt;img src="http://500px.com/graphics/pages/team/squares/david.jpg"&gt;&lt;figcaption&gt;David Charlec&lt;/figcaption&gt;&lt;/figure&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>