How to add an element to a button on hover - html

Question

I'm pretty new to CSS, I wanted to know if it's possible to have some content (an image) on a button on hover. I'll attach an image on how I want it to be. Thank you in advance.

Answer 1

Here's a way to do it:
.btncontain {
position: relative;
width: 200px;
height: 100px;
}
.button {
border: 3px solid aqua;
border-radius: 10%;
width: 100px;
margin: 20px;
padding: 10px;
}
.button:hover{
background-color: aqua;
color: white;
}
.button:before {
content: "Normal";
}
.button:hover:before {
content: "On Hover";
}
.btncenter {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bubble {
width: 30px;
display: none;
z-index: -1;
}
.button:hover .bubble{
display: block;
}
.bubbletop{
position: absolute;
top: 25%;
left: 85%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bubblebottom{
position: absolute;
top: 75%;
left: 15%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="btncontain">
<div class="btncenter">
<button class="button"> <img class="bubble bubbletop"src="https://cdn130.picsart.com/262368078025212.png?r1024x1024">
<img class="bubble bubblebottom"src="https://cdn130.picsart.com/262368078025212.png?r1024x1024"></button>
</div>
</div>