具有摩西效果的响应式图库

Question

我尝试使用鼠标悬停效果在图像库中的图像之间添加空格但是当在CSS代码中添加填充或边距时，鼠标悬停效果会破坏，我该怎么办？

我的HTML代码是：

  @foreach($array as $img)
      <section class="portfolio-container">
          <ul class="portfolio-list">
            <li>
                <a href="#">
                    <img src="{{$img['image']}}">
                </a>
            </li>
        </ul>

     </section>

和CSS代码：

.portfolio-container,
.portfolio-list {
margin:0 auto;
  list-style: none;

}
.portfolio-container{padding-bottom:200px;}


.portfolio-list li {
   float: left;
   opacity: 1;
   filter: alpha(opacity=100);
   position: relative;
   display: block;
   margin:0;
  }
.portfolio-list li img {
   vertical-align: middle;
  display: block;
  width: 100%;
   margin:0;
    height: 100%;
  }
.portfolio-list a:after {
     color:#ffff;
   content: '\f067';
    font-family: FontAwesome;
   max-width:100%;
   position: absolute;
  width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   display:flex;
   background: rgba(0, 0, 0, 0.6)  center center no-repeat;
   opacity: 0;
   transition: all 0.5s;
   -webkit-transition: all 0.5s;
   text-align:center;
   align-items: center;
   justify-content: center;
   font-size:45px;
  }

.portfolio-list a:hover:after {
   opacity: 1;
  }
 @media (min-width: 768px) and (max-width: 979px) {
   .portfolio-list li {
    width: 33.3333%;
    height:280px;
 }
   .portfolio-list {
    width: 70%;}
 }

  @media (max-width: 767px) {
    .portfolio-list li {
    width: 33.3333%;
    height:100px;
  }
   .portfolio-list {
    width: 100%;}
  }

我的画廊的形象   

Answer 1

尝试在.portfolio-list li的底部添加两行，如果您只是在寻找照片之间的间隙，无法理解您是否正在寻找使用鼠标悬停添加的间隙，但是如果是这种情况，你可以把它们扔在悬停上。

.portfolio-list li {
    position: relative;
    display: block;
    float: left;
    width: 20%;
    border: 10px solid white;
    margin: -10px;
}