格式化图像悬停文字

Question

我知道这是一个简单的格式化问题，但是我需要在图像上方的悬停框内格式化一些文本。 我想将悬停文本分成两段，并且由于某种原因，悬停文本没有覆盖整个图像...下面是我的悬停CSS：

 ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

ul.img-list li {
  display: inline-block;
  height: auto;
  margin: ;
  position: relative;
  width: 100%;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  display: table;
  height: 100%;
  left: 0;
  position: justify;
  top: 0;
  width: 75%;
}

span.text-content span {
  display: ;
  text-align: center;
  vertical-align: middle;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  display: table;
  height: auto;
  left: 0;
  position: justify;
  top: ;
  width:100%;
  opacity: 0;
}

ul.img-list li:hover span.text-content {
  opacity: 1;
}

span.text-content {
  background: rgba(0,0,0,0,5);
  color: white;
  display: ;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 2000ms;
  -moz-transition: opacity 2000ms;
  -o-transition: opacity 2000ms;
  transition: opacity 2000ms;
}

Answer 1

您可以在此处执行类似以下代码示例的操作： JSFiddle

HTML：

<span class="tooltip" data-tooltip="I'm small tooltip. Don't kill me!">Hover me!</span>

CSS：

.tooltip {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}

.tooltip::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip); /* The main part of the code, determining the content of the pop-up prompt */
    margin-top: -24px;
    opacity: 0; /* Our element is transparent... */
    padding: 3px 7px;
    position: absolute;
    visibility: hidden; /* ...and hidden. */

    transition: all 0.4s ease-in-out; /* To add some smoothness */
}

.tooltip:hover::after {
    opacity: 1; /* Make it visible */
    visibility: visible;
}