Rollover Hover Image on HTML Button - html

Question

So I am currently building a landing page for an app that will be soon coming online - However, I have only developed the iOS version so far and will start the android development once the iOS version has gone live.
Now, on my landing page - I have 2 buttons that will redirect to either the Apple store or Google play. For the apple store everything is fine, however I want to add a text that appears when going over the Google Play button which will say something like "coming soon!".
I have tried something but since I am not an expert when it comes to web development, the outcome below clearly shows that swell.. Can anyone help?
.home {
color: #3D464C
}
.home p {
color: #757F86
}
.home__header {
position: relative;
margin-bottom: 3em;
padding: 0 15px;
background: url("../images/jpg/home/header.f03ddb38.jpg") 0 80% no-repeat;
background-size: cover;
text-align: center
}
.home__header h1 {
margin-bottom: 100px;
font-size: 1.8em;
line-height: 1.4
}
.home__header .home__cta--web {
position: absolute;
bottom: -4em;
left: 0;
width: 100%
}
#media (min-width: 769px) {
.home__header {
background-size: cover;
background-position: 50% 80%
}
.home__header h1 {
margin-top: 100px;
margin-bottom: 0;
font-size: 2.4em
}
}
.home__app {
max-width: 300px;
margin: 90px auto 30px;
text-align: center
}
#media (min-width: 769px) {
.home__app {
margin: 30px auto 100px
}
}
.home__app li {
display: inline-block;
margin-top: 0;
width: 50%;
margin-right: -.4em;
vertical-align: middle;
padding: 0 7.5px
}
.home__cta--web {
display: block;
margin-top: 2.5em
}
.home .button {
margin-top: 0;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.home__step {
padding: 50px 15px;
border-bottom: 1px solid #ddd
}
.home__step .illu__container {
margin: 0 auto
}
.home__step__desc {
max-width: 600px;
margin: 0 auto;
text-align: center
}
.home__step h2 {
font-size: 2em;
line-height: 1.4
}
.home__step--04 {
position: relative;
background: url("../images/jpg/home/04.9474e531.svg") no-repeat;
background-size: 80%;
background-position: center 0
}
#media (min-width: 769px) {
.home__step--04 {
background-size: 500px
}
}
.home__step--04 .home__step__illu {
padding: 0 40px;
max-width: 600px;
margin: 0 auto 30px
}
#media (min-width: 769px) {
.home__step {
padding: 100px 15px
}
.home__step--01 .home__step__illu,
.home__step--03 .home__step__illu {
display: inline-block;
margin-top: 0;
width: 50%;
margin-right: -.4em;
vertical-align: middle;
padding: 0 20px
}
.home__step--01 .home__step__illu .illu__container,
.home__step--03 .home__step__illu .illu__container {
margin-right: 0
}
.home__step--01 .home__step__desc,
.home__step--03 .home__step__desc {
text-align: left;
display: inline-block;
margin-top: 0;
width: 50%;
margin-right: -.4em;
vertical-align: middle
}
}
<ul class="home__app hide-for-medium js-dl--app">
<li>
<a href="#" data-store="ios" target="_blank">
<picture class="picture picture--no-background" style="padding-bottom: 34.88%"><img src="assets/images/svg/store/appstore--en.4c7135ef.svg" alt="Download the iOS app"></picture>
</a>
</li>
<li>
<a href="#" data-store="android" target="_blank">
<picture class="picture picture--no-background" style="padding-bottom: 34.88%"><img src="assets/images/svg/store/playstore--en.618c3ad6.svg" alt="Download the Android app"></picture>
</a>
</li>
</ul>
Current Outcome
Current outcome

Answer 1

If I understood your question. You want a the coming soon text to come up whenever anyone hover the playstore button. Please use the code below as reference.
Note : The .container div here is just for example. You should put the code inside .container in your li and make required changes with img src and other styles
.container{
width: 50%;
padding: 50px;
background: #444;
text-align: center;
}
.my-btn-class{
position: relative;
display: block;
}
.my-btn-class img{
max-width: 100%;
}
.my-btn-class:hover > .btn-over{
display: flex;
}
.btn-over{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: none;
top: 0px;
align-items: center;
justify-content: center;
color:#ddd;
font-weight: 600;
}
<div class="container"><!--Example div. Use the below code in your li -->
<a class="my-btn-class" href="#" data-store="android" target="_blank">
<picture class="picture picture--no-background" style="padding-bottom: 34.88%"><img src="http://via.placeholder.com/350x150" alt="Download the Android app"></picture>
<div class="btn-over">
Coming Soon
</div>
</a>
</div>
Hope this helps