1

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 over when going over the Google Play button which will say something like "coming soon!".

This is what the code for my Google play button looks like now: 

<pre>
  <a class="js-link--android" 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>
</pre>

Google Play button on the website I am not sure how to do this - Would be glad if anyone can help me out on this! Sorry I am not so good at Web development..

SkywalkerA
  • 85
  • 1
  • 1
  • 7
  • Umm... there's nothing in your code block... you might want to utilize tooltips, otherwise make a div positioned under the button or over it and make it show and disappear with javascript events. – vityavv Oct 26 '17 at 16:55
  • @zevee Hi, is it visible now? – SkywalkerA Oct 26 '17 at 16:57

1 Answers1

0

You can wrap your picture element with a div, and then you can write something like this in CSS:

#yourlink:hover #yourdiv {
    display: block;
}
#yourlink #yourdiv {
    display: none;
}

Inside the div you can put Coming Soon and you can make it's background black or whatever

Also, and I'm not sure this will work, you can try to put the div inside of the picture, and then just reverse the order of the selectors in the CSS

vityavv
  • 1,482
  • 12
  • 23
  • I am not sure I understand what you mean... This is what its in my CSS currently: 
     .jobs__container {
    margin: 100px 0 60px;
    text-align: center
}
    – SkywalkerA Oct 26 '17 at 17:16
  • But I don't have a div anywhere? I am using a SVG file to display the current image? Sorry If I am confused – SkywalkerA Oct 26 '17 at 17:20
  • understood what you meant there now but now I have "coming soon" written above the box and the box shifted below – SkywalkerA Oct 26 '17 at 17:45
  • I have edit my question and uploaded a screenshot of my current code – SkywalkerA Oct 26 '17 at 18:28
  • Make sure that the closing div tag is after the picture element, like this: `
    ` and I'm not too sure (since you're not posting that much code) but you can change the z-index of the image to be like -1 or something...     – vityavv Oct 26 '17 at 21:43