I have scoured both SO and Google for an answer to my problem, but haven't had any luck. I am trying to achieve a simple task, but I'm unsure of how to do it. Here is the scenario:
Currently, I am working on a website using HTML, CSS, and Bootstrap. Within this website, I have added some buttons with glyphicons, like the ones shown here: . Unfortunately, I am unable to post images at the moment.
Below is the code for one of the key buttons, with the rest following a similar format:
<a class="button" target="_blank" href="https://keybase.io/adolphenom">
<i class="fa fa-key fa-lg"></i>
</a>
My objective is to have a text display at the bottom of the button when the cursor hovers over it (the specific styling of the text in terms of color and font is not a major concern right now).
I have tried several tutorials I came across, but none of them suit my requirements.
Could you please assist me?
Thank you in advance!
I am encountering another issue now. Following @monkeyinsight's advice (though instead of a div, I used a span as divs seem to disrupt other elements in the HTML), I face the following problem:
When I move the cursor off the icon but hover over the text below (by scrolling down instead of up), this occurs: . The text does not disappear :(
Could you offer your assistance once again? Thank you!
The CSS code is as follows:
span {
position: relative;
}
a.button {
color: #00628B;
margin-left: 7.5px;
margin-right: 7.5px;
-webkit-transition: color 0.15s ease-in, background 0.15s ease-in;
-moz-transition: color 0.15s ease-in, background 0.15s ease-in;
-ms-transition: color 0.15s ease-in, background 0.15s ease-in;
-o-transition: color 0.15s ease-in, background 0.15s ease-in;
transition: color 0.15s ease-in, background 0.15s ease-in;
}
a.button:hover,
a.button:focus {
color: #575757;
text-decoration: none;
outline: 0;
}
.twitter:hover::after,
.twitter:focus::after {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 60px;
content: "Contact by email";
display: block;
position: absolute;
top: 15px;
left: -65px;
color: #81A594;
text-decoration: none;
}
Code for the span:
<span class="twitter">
<a class="button" target="_blank" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1d1813100c14191213113c1b111d1510521f1311">[email protected]</a>">
<i class="fa fa-envelope-o fa-lg"></i>
</a>
</span>