Rollover Hover Image on HTML Button

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

Similar text over button might help you: https://stackoverflow.com/questions/30324213/text-over-the-image-button — Nisarg, Oct 26 '17 at 18:55
@SkywalkerA try adding your code in your question instead take ascreenshot of it — Gagantous, Oct 26 '17 at 18:56
Please add your code here in the snippet. It will be easier for all to answer. — Rajan Benipuri, Oct 26 '17 at 18:57
Is this your complete css code? because there are other child also inside the .home__app ul — Rajan Benipuri, Oct 26 '17 at 19:11
The code provided does not reproduce the problem, please include more — jaunt, Oct 26 '17 at 19:23
@SkywalkerA It still does not reproduce the problem: I suspect it lies within the CSS for the classes `picture` and `picture--no-background` — jaunt, Oct 26 '17 at 19:37

score 1 · Answer 1 · answered Oct 26 '17 at 20:11

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

I have done that but the outcome is still not right - Please check the updated "current outcome" above. — SkywalkerA, Oct 27 '17 at 07:53

Rollover Hover Image on HTML Button

1 Answers1