Question

我正在制作一种Instagram类型的Feed并且有4张图片，另外还有4张4张。我需要制作一个叠加层，我可以在显示Instagram粉丝的所有8张图片前面添加文字，并链接到他们的Instagram

我已经完成了大部分工作，但覆盖层似乎无法让它发挥作用。任何帮助将不胜感激，提前谢谢。

约什

＆＃13;

<img src="myPicture.png" id="imgid" width="100" height="100" >

＆＃13;

Answer 1

喜欢这个？您可以根据需要在叠加层中放置任何单词。我使用了xs列，因此你可以完全看到它。

.overlay{
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:rgba(0,0,0,.5);
  z-index:10;
}
.overlay h2{
  color:#fff;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="overlay">
<h2>Follow me on Insta</h2>
</div>
<div class="row images">
    <div class="col-xs-3">
        <img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
    </div>

    <div class="col-xs-3">
        <img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
    </div>
    <div class="col-xs-3">
        <img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
    </div>
    <div class="col-xs-3">
        <img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
    </div>
</div>

</div>

Answer 2

使用o overlay div，其位置绝对覆盖整个图像容器，如示例....

.images{
  position:relative;
  display:inline-block;
}
.overlay{
   position: absolute;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.5);
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}
.images:hover .overlay{
  visibility: visible;
}

<div class="images">
    <div class="col-sm-3">
        <img src="http://via.placeholder.com/350x150" alt="Image Gallery" class="img-responsive">
    </div>

    <div class="col-sm-3">
        <img src="http://via.placeholder.com/350x150" alt="Image Gallery" class="img-responsive">
    </div>
    <div class='overlay'>
      <span>some text</span>
    </div>
</div>

Answer 3

我认为以下是您的需求。我使用flexboxes进行布局。

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
  width: 500px;
}

.item {
  display: inline-block;
  margin: 0 0.5em 0.5em 0;
  position: relative;
}

.text {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  top: 0;
}

.text:hover {
  border: thin solid red;
  animation: opac 0.3s ease forwards;
}

@keyframes opac {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row-sm-12 container">
  <div class="row-sm-3 item">
    <img src="http://placehold.it/100">
    <div class="text">Bla bla</div>
  </div>
  <div class="row-sm-3 item">
    <img src="http://placehold.it/100">
    <div class="text">Bla bla</div>
  </div>
  <div class="row-sm-3 item">
    <img src="http://placehold.it/100">
    <div class="text">Bla bla</div>
  </div>
  <div class="row-sm-3 item">
    <img src="http://placehold.it/100">
    <div class="text">Bla bla</div>
  </div>
  <div class="row-sm-3 item">
    <img src="http://placehold.it/100">
    <div class="text">Bla bla</div>
  </div>
  <div class="row-sm-3 item">
    <img src="http://placehold.it/100">
    <div class="text">Bla bla</div>
  </div>
  <div class="row-sm-3 item">
    <img src="http://placehold.it/100">
    <div class="text">Bla bla</div>
  </div>
  <div class="row-sm-3 item">
    <img src="http://placehold.it/100">
    <div class="text">Bla bla</div>
  </div>
</div>

在多个图像上叠加单词

3 个答案: