1

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 - enter image description here

What I want it to do on hover enter image description here

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.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
Kelsey Kronmiller
  • 45
  • 4
  • 11

3 Answers3

2

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

LanFeusT
  • 2,392
  • 5
  • 38
  • 53
  • I'll start by saying I haven't actually tried this yet so this could totally work, but I've been playing around with the transition properties and for whatever reason, my circle would move position when hovered over. It would turn, but it looked as though it was pinned from the top. I'm terrible at explaining things so here is an image of what it did kinda when you hovered over it - http://i49.tinypic.com/s1uays.png I'm looking for it to look as if only the "+" sign rotated, not the circle. I even tried making the circle as the background image, but the + sign ended up doing the same thing – Kelsey Kronmiller Oct 03 '12 at 20:43
  • The reason the whole thing looks like it's rotating is due to padding or margins on the image container. If the image is not centered in your wrapper that has the rotation then the image will seem off centered, if it was centered the whole circle would rotate as well but it would stay in place and thus only seem like the + sign rotates. – LanFeusT Oct 03 '12 at 23:32
0

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

Caelea
  • 2,318
  • 15
  • 22
0

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

Afshin
  • 4,197
  • 3
  • 25
  • 34