jquery - 具有移动效果的响应式图片库

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;
}