Solution Smith

Steam is associated with hot food or coffee. Animation attracts the attention to focus on what and where the movement is coming from. Steam also looks like smoke, and smoke is a subliminal, where there is smoke there is fire and fire is something that needs immediate attention. Be aware, an animated subliminal is likely to attract attention away from other content on the page, which is good when your content is competing for attention against other content.

<style>
#steam1 {
width: 320px;
height: 480px;
background: linear-gradient(to bottom, #1e5799 0%,#0075d6 19%,#2989d8 27%,#2989d8 51%,#2e22d6 73%,#6b4511 77%,#fccc88 100%);
position:relative;
justify-content: center;
border-radius:50%;
border-style: inset;
box-shadow: 10px 10px 11px lightblue;
overflow: hidden;
}

#steam1 img {
position:relative;
top:200px;
left:-6px;
}

#anima1 {
display: flex;
justify-content: center;
width:280px;
position:absolute;
}

#anima1 span {
position:relative;
bottom:-120px;
margin: 0 2px 50px;
min-width:8px;
height:120px;
background:white;
border-radius:50%;
animation: animate 3s linear infinite;
opacity: 0;
filter: blur(8px);
animation-delay: calc(var(--i) * 1s);
}

@keyframes animate {
0% {
transform: translateY(0) scaleX(1);
opacity: 0;
}
15% {
opacity: 1;
}
50% {
transform: translateY(-75px) scaleX(5);
}
95% {
opacity: 0;
}
100% {
transform: translateY(-150px) scaleX(10);
}
}
</style>

<div id="steam1">
<div id="anima1">

<span style="--i:.5"></span>
<span style="--i:.3"></span>
<span style="--i:1.5"</span>
<span style="--i:2.5"</span>
<span style="--i:.1"></span>
<span style="--i:.1"></span>
<span style="--i:1.5"</span>
<span style="--i:1"></span>
</div>

<img src="coffee-300x.png" >
</div>