Change text on hover, CSS and html - html

Question

I want to change the text when hovering over a speechbubble (already created) and set the text back when the mouse goes back. I have a "Welcome!" text set on the speechbubble and I want it to change to "Scroll down". The other issue is that I have set a css transformation on the speechbubble+welcome so that makes it harder..
Here's my code:
#welcome{
position:absolute;
top:50%;
left:50%;
width:auto;
height:auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#speechbubble {
margin-left:110px;
width: 230px;
height: 80px;
line-height:80px;
text-align:center;
font-size:15px;
letter-spacing:2px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
font-family:{select:Title Font};
background: {color:Welcome background};
color:{color:Welcome text};
position: relative;
font-weight:bold;
}
#speechbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 18px solid {color:Welcome background};
border-bottom: 13px solid transparent;
}
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left:120px;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="welcome">
<div id="speechbubble">Welcome!</div>
I've tried some tricks like adding a div for the second text and setting a css hover but it didn't work.. Can anyone help me? Thanks

Answer 1

You can use pseudo class :after and change its content on hover.
Like this:
#welcome {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#speechbubble {
margin-left: 110px;
width: 230px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 15px;
letter-spacing: 2px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
font-family: {
select: Title Font
}
;
background: {
color: Welcome background
}
;
color: {
color: Welcome text
}
;
position: relative;
font-weight:bold;
}
#speechbubble:after {
content: "Welcome!";
}
#speechbubble:before {
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 18px solid {
color: Welcome background
}
;
border-bottom: 13px solid transparent;
}
#welcome:hover #speechbubble:after {
content: "Scroll Down";
}
#welcome:hover #speechbubble {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left: 120px;
}
#welcome #speechbubble {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="welcome">
<div id="speechbubble"></div>

Answer 2

Using :after & :before try this, add this to your css:
#welcome:hover #speechbubble:after {
content: "Scroll Down";
}
#welcome:hover #speechbubble:before {
content: "";
}
#speechbubble:before {
content: "Welcome!";
}
then remove this right,top and position from your css:
#speechbubble:before {
content:"";
/*position: absolute;*/
/*right: 100%;*/
/*top: 26px;*/
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 18px solid {color:Welcome background};
border-bottom: 13px solid transparent;
}
also remove the word Welcome:
<div id="welcome">
<div id="speechbubble"></div>
now this is the magic of CSS :)

Answer 3

Here is an example code using pseduo elements with data- attributes to
achieve the things:
#welcome {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
body {
background: black;
}
/* .button */
#speechbubble {
display: inline-block;
position: relative;
margin: 1em;
padding: 0.67em;
border: 2px solid #FFF;
overflow: hidden;
text-decoration: none;
font-size: 2em;
outline: none;
color: #FFF;
background: transparent;
font-family: 'raleway', sans-serif;
}
#speechbubble span {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
#speechbubble:before {
content: '';
position: absolute;
top: 0.67em;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
-webkit-transition: .4s, opacity .6s;
-moz-transition: .4s, opacity .6s;
-o-transition: .4s, opacity .6s;
transition: .4s, opacity .6s;
}
/* :before */
#speechbubble:before {
content: attr(data-hover);
-webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
-o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
}
/* Span on :hover and :active */
#speechbubble:hover span {
opacity: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
/*
We show :before pseudo-element on :hover
*/
#speechbubble:hover:before {
opacity: 1;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
transition-delay: .4s;
}
<div id="welcome">
<div id="speechbubble" data-hover="Scroll Down"><span>Welcome!</span></div>
</div>

Answer 4

Here's very basic way to do it. Just put the text in some tags, and show/hide them on hover.
Also you can use the attr and :after features from css3.
#welcome{
position:absolute;
top:50%;
left:50%;
width:auto;
height:auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#speechbubble {
margin-left:110px;
width: 230px;
height: 80px;
line-height:80px;
text-align:center;
font-size:15px;
letter-spacing:2px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
font-family:{select:Title Font};
background: {color:Welcome background};
color:{color:Welcome text};
position: relative;
font-weight:bold;
}
#speechbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 18px solid {color:Welcome background};
border-bottom: 13px solid transparent;
}
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left:120px;
}
#welcome #speechbubble .hover_on {
display: none;
}
#welcome #speechbubble .hover_off {
display: inline-block;
}
#welcome:hover #speechbubble .hover_on {
display: inline-block;
}
#welcome:hover #speechbubble .hover_off {
display: none;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="welcome">
<div id="speechbubble"><p class="hover_off">Welcome!</p><p class="hover_on">Scroll down!</p></div>