具有moseover效果的响应式图库

Question

I'm Trying to Add space Between Images in Image Gallery with mouseover effect But When Add padding or margin in CSS code the mouseover effect destroy,How Can I do this?

My HTML code is:

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

     </section>

And CSS Code:

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

Image Of My Gallery

Answer 1

Try adding the two lines on the bottom of the .portfolio-list li if you're just looking for a gap between the photos, can't understand if you are looking for the gap to add in with the mouseover, but you can throw those on the hover instead if that's the case.

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