將文字跨過圖片

Question

當鼠標懸停div時，我嘗試dsiplay在圖像上跨文本。
我嘗試這個。
HTML

<div id="some-div">
  <a href="#"><img class='round_border type_border' src='http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif'/>
  <span id="some-element">Dounald
  </span></a>
</div>

CSS看起來像這樣

<style>
    #some-div{  
      position:relative
    }
    #some-element {
      width:100px;
      height:100px;
      border: 1px solid orange;
      display: none;
      font-size: 10px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      text-align: center;
      text-transform: uppercase;
      position: absolute;
      top:0;
      left:0;
      background:rgba(255,79,50,.5);
      color:Black !important;
      margin-top:2px;
      border:1px solid gray;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
    }

    #some-div:hover #some-element {
      display: block;
      position: relative;
      cursor: pointer;
      color:#FFFFFF;
    }
    a{
    position: relative;

    }
    .type_border {
    width: 100px;
    height: 100px;
    background: white;
    position: absolute;
    }
    .round_border {
    float: left;
    border:1px solid gray;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
    background: white;
    }
    </style>

Answer 1

添加position: absolute span和position:relative對於主要div

#some-div{  
  position:relative
}
#some-element {
  width:80px;
  border: 1px solid #ccc;
  display: none;
  font-size: 10px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  top:0;
  left:0
}

DEMO

Answer 2

使用標題。

<img class='img' title='Donald Duck' src='http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif'/>

Answer 3

如果要在鼠標懸停圖像上顯示文本。

您只需使用html圖像元素的title屬性即可完成此操作

例如：

當鼠標懸停時，您將能夠看到該文本。

希望這可以幫助..

Answer 4

不幸的是，據我所知，您不能在圖像上插入文本。

解決方法是在具有背景圖片的div中設置跨度

#some-div{
    background-image:url('http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif');
    background-repeat:no-repeat;
}

檢查此鏈接http://jsfiddle.net/sy6MG/