html - 在图像上跨越文本

Question

当鼠标悬停在 div 上时，我尝试在图像上播放跨度文本。
我正在尝试这个。
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 添加到 main 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