HTML5与图标题相同的多个图像

Question

在彻底寻找我的问题的答案后，我转向你们，试着帮助我。我正在尝试建立我在主题公园的第一个完整网站。我一直试图在同一条线上获得3个图标，这是我首先实现的，但是只要我用HTML5添加图形标题，图像就会叠加在一起，下面有标题。对此的任何帮助将不胜感激。

HTML：

<div class="popular">
    <figure>
        <img src="images/kidsride.jpg" alt="popular-rides1" 
class="left">
        <figcaption> Rocket Run </figcaption>

        <img src="images/duelingdrags.jpg" alt="popular-rides2" 
class="center">
        <figcaption> Dueling Dragons </figcaption>

        <img src="images/familyfall.jpg" alt="popular-rides3" 
class="right">
        <figcaption> Family Fall </figcaption>
    </figure>
</div>

CSS：

.popular{
    display: table;
    margin: 0 auto;
    padding: 20px;
    position: relative;
}

.left{
    margin: 50px;
    border-radius: 50%;
    filter: drop-shadow(0 0 20px #000);
    float:left;
}

.center{
    margin: 50px;
    border-radius: 50%;
    filter: drop-shadow(0 0 20px #000);
}

.right{
    margin: 50px;
    border-radius: 50%;
    filter: drop-shadow(0 0 20px #000);
}

figure{
    display: table;
    width: auto;

}

figcaption{
    display: inline-block;
    text-align: center;
    display: table-row;
    font-family: helvetica;
    margin: 5px;
    font-size: 20px;
    letter-spacing: 2px
}