Circle

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:600" rel="stylesheet">
<style>
  .circle {
    border: 6px solid pink;
    background: pink;
    border-radius: 50%;
    width: 100px; height: 100px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  span.CircleText {
  	font-family: Century Gothic;
    font-size: 150%;
    font-weight: bold;
    color: white;
    text-shadow: 3px 2px grey;
    
  }
  span.MoreInfo {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 120%;
    color: #F1948A;
  }
    .hidden {display:none}
	.circle:hover
	.hidden {display:block}
</style>

<center>
<table>
<tr>
<td><div class="circle">
    <div class="inside">
        <span class="CircleText"> <br /> &nbsp &nbsp fire</span>
    </div>
    <br /><br />
    <div class="hidden">
        <span class="MoreInfo">The sea turtle population has halved within the past 30 years due to plastic in oceans.</span>
    </div>
</div></td>
<td><div class="circle">
    <div class="inside">
        <span class="CircleText">  <br />&nbsp polar bears</span>
    </div>
    <br /><br />
    <div class="hidden">
        <span class="MoreInfo">The sea turtle population has halved within the past 30 years due to plastic in oceans.</span>
    </div>
</div></td>
<td><div class="circle">
    <div class="inside">
        <span class="CircleText"> <br />&nbsp turtle</span>
    </div>
    <br /><br />
    <div class="hidden">
        <span class="MoreInfo">The sea turtle population has halved within the past 30 years due to plastic in oceans.</span>
    </div>
</div></td>
<td><div class="circle">
    <div class="inside">
        <span class="CircleText"> <br />&nbsp ice bergs</span>
    </div>
    <br /><br />
    <div class="hidden">
        <span class="MoreInfo">The sea turtle population has halved within the past 30 years due to plastic in oceans.</span>
    </div>
</div></td>
</tr>
</table>
</center>