Slide out text from an image using CSS on hover - css

Question

I'm trying to get the words "I'm available!" to slide out, from the left, of the little "+" image, when I hover my mouse over it. What I've found on Google just isn't helping.
Before -
What I want it to do on hover
I would also like to make that little "+" sign turn sideways when hovered over as well, but I think I have an idea on how to do that myself. Wouldn't mind the help though :)
If I could do all of these things with just CSS/HTML, that would be great. I know some jQuery, but I try to avoid it because CSS is just cleaner.

Answer 1

If you want it to rotate without using jquery just use the css3 animation properties:
This will make your plus icon rotate 360 deg when hovered
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
#-moz-keyframes rotate {
from
{
-moz-transform: rotate(360deg);
}
to {
-moz-transform: rotate(0deg);
}
}
.plusicon:hover
{
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
You should also be able to use -webkit-transition-duration: 1s; to move your text out

Answer 2

So you want some sort of tooltip.
The html:
<a href="#">
<span>I'm available!</span>
</a>
The css:
a {
background: url(../path_to_image.png) 0 0 no-repeat; /*you allready have that part */
position: relative;
}
a span {
display: none;
position: absolute;
left: -10px;
top: 3px;
}
a:hover span {
display: block;
}
You can replace the <a> tag whit whatever you have there

Answer 3

HTML:
<div class="slidebtn">
<div class="icon">
<div class="text"><p>I'm Aviable</p></div>
</div>
</div>​
CSS:
.slidebtn{
width:140px;
margin:auto;
overflow:hidden;
height:auto;
position:relative;
}
.text{
position:absolute;
width:100px;
float:Left;
margin-left:150px;
}
.icon{
background-image:url('http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/png/24x24/001_01.png');
width:24px;
height:24px;
float:right;
background-repeat: no-repeat;
background-position: right;
}
.icon:hover{
width:130px;
}
.icon:hover .text{
margin-left:0px;
}
​
DEMO
​
if you want use CSS3 transition change style like these
.text{
position:absolute;
width:100px;
float:Left;
margin-left:150px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index:-1;
}
.icon{
background-image:url('http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/png/24x24/001_01.png');
width:24px;
height:24px;
float:right;
background-repeat: no-repeat;
background-position: right;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
DEMO 2