JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width: 90%; border-collapse: collapse;" align="center" width="">
    <tbody>
        <tr align="center">
            <td colspan="3" style="width: 50%; letter-spacing: 0px; word-spacing: 0px; vertical-align: middle; font-family: Arial; font-size: 20pt; font-style: normal; font-weight: normal; text-decoration: none; color: rgb(105, 105, 105); text-shadow: 1px 1px 0px rgb(255, 255, 255); text-align: center; padding-top: 20px;"></td>
        </tr>
        <tr>
            <td align="center" class="item">
                <span class="p-circle"></span>    
                <span class="p-ribbon">Креативно</span>                
                <span class="p-info">Тут должен появляться текст только при наведение на обе картинки</span>
            </td>
        </tr>
    </tbody>
</table>

CSS

.p-circle {
 display: inline-block;
 vertical-align: middle;
 width: 204px;
 height: 204px;
 border: 8px solid rgb(234, 202, 156);
 border-radius: 50%;
 background: none no-repeat scroll center bottom rgb(255, 255, 255);
 transition: all 0.17s ease-out 0.08s;
 background-image: url("http://contest.uid.me/img/p-one.png");
}

.p-circle:hover {
border-color: rgb(54, 160, 216);
background-position: center top;
}

.p-ribbon {
 display: block;
 position: relative;
 margin-top: -22px;
 width: 309px;
 height: 47px;
 font-size: 14px;
 line-height: 42px;
 color: rgb(255, 255, 255);
 text-transform: uppercase;
 text-align:center;   
 background: url("http://contest.uid.me/img/ribbon.png") repeat scroll 0% 0% transparent;
}

.p-info {
display: inline-block;
margin-top: 20px;
vertical-align: top;
font-size: 12px;
text-align: right;   
color: #8f969f;
visibility:hidden;
opacity:0;
-webkit-transition: all 0.1s 0.1s ease-out;
transition: all 0.1s 0.1s ease-out;
}
.item:hover .p-info {opacity:1; visibility:visible;}