在悬停时使用CSS从图像中滑出文本

Question

我试图得到“我可以获得的字样！＆＃34;从左边滑出的小＆＃34; +＆＃34;图像，当我将鼠标悬停在它上面时。我在谷歌上发现的东西并没有帮助。

之前 -

我想在悬停

上做什么

我还想做那个小小的＆＃34; +＆＃34;标志在徘徊时转向侧面，但我想我对如何做到这一点有自己的想法。不过不会介意帮助：）

如果我能用CSS / HTML做所有这些事情，那就太好了。我知道一些jQuery，但我尽量避免它，因为CSS只是更清洁。

Answer 1

如果你想在不使用jquery的情况下旋转它，只需使用css3动画属性：

这将使你的加号图标在悬停时旋转360度

@-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;
}

您还应该能够使用-webkit-transition-duration: 1s;将文字移出

Answer 2

所以你想要某种工具提示。

html：

<a href="#">
    <span>I'm available!</span>
</a>

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;
}

您可以替换<a>标签，无论您拥有什么

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

​

如果你想使用像这些

这样的CSS3过渡更改样式

.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