Question

我正在寻找图像的html并将其放置在hoverbox的html之上，本质上将它们组合为一个。现在，它只是在网站构建器上彼此重叠。

我正在寻找图像在框上的偏移量，该偏移量距左边缘20像素，而图像的50像素在框上方。

这是图片html：

<img src="//nebula.wsimg.com/cc84164040e92300e67a86f486b3c062?AccessKeyId=DF4AFAE6F2646747E578&amp;disposition=0&amp;alloworigin=1" style="vertical-align:middle;width:172px;height:209px;">

这是hoverbox html：

<div class="wsb-htmlsnippet-element">

<div id="box19-22">
  &nbsp;Name

  <div id="overlay19-22">
    <span id="plus19-22">Position:<br>Hometown:<br>Year:<br>Date of Birth:<br>Tenure:</span>
  </div>

</div>

<style>

body {
  background: -1;
}

#box19-22 {
  width: 265px; /*width of box*/
  height: 180px; /*height of box*/
  box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid #a9b4bb;
  border-top: 1px solid #a9b4bb;
  border-right: 1px solid #a9b4bb;
  border-left: 1px solid #a9b4bb;
  margin: 5% auto 0 auto;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#264033),color-stop(1,#000)); 
  font-family: Helvetica;
  font-weight: 900;
  color: #ffffff; /*color of front text*/
  font-size: 24px;
  padding-left: 190px;
  /* NEW */
  line-height: 180px;
  text-align: center;
  position: relative;
}

#overlay19-22 {
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#264033),color-stop(1,#000)); /*color of back box*/
  /* box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45); */
  text-align: left;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;

  /* NEW */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  line-height: 32px;
  padding-left: 225px;
}

#box19-22:hover #overlay19-22 {
  opacity: 1;
}

#plus19-22 {
  font-family: Helvetica;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}


</style>
</div>

感谢您的帮助！

将悬停框与图像结合在一起-HTML，CSS，JavaScript

0 个答案: