Question

需要为图像添加叠加层，该图像将具有10px的全方位填充和文本“ - 视图细节 - ”在垂直和水平方向上居中。我找不到任何关于如何实现这一目标的内容。这是我需要的屏幕截图的URL。这是原始图像的URL，当它不在：悬停状态时。

Answer 1

.image {
  display: inline-block;
  position: relative;
  height: auto;
  width: 25%;
}
.image img {
  width: 100%;
  height: auto;
}
.details {
  display: none;
}
.image:hover .details {
  background-color: white;
  display: block;
  position: absolute;
  left: 10px;
  top: 10px;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
}
.details span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

<div class="image">
  <img src="http://www.pixeldecor.com/patterns/color-samples/brikbrak-sample.gif" />
  <div class="details">
    <span>View details</span>
  </div>
</div>

Answer 2

＆＃13;

.image {
  background: rgba(0, 0, 0, 0) url("http://new.tinygrab.com/a8bc0638b9433ec64cb0bfc81091b1c77b45a66fe1.png") repeat scroll 0 0;
  border: 2px solid gray;
  height: 300px;
  padding: 10px;
  position: relative;
  text-align: center;
  width: 300px;
}
.overlay {
  opacity: 0;
  transition: all ease 1s;
  vertical-align: middle;
  line-height: 300px;
  color: #747E8B;
  font-size: 2em;
  height: 0;
}
.image:hover .overlay {
  background: white;
  opacity: 1;
  width: 300px;
  height: 300px;
}

＆＃13;

<div class="image">

  <div class="overlay">-- View Details --</div>

</div>

＆＃13;

Answer 3

在这里：

.asdf{
    width:270px;
    height:150px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-75px 0 0 -135px;
    background-color:green;
    color:white;
    text-align:center;
    line-height:150px;
}

这是一个工作小提琴LINK

以填充和文本为中心的图像叠加

3 个答案: