title: Putting a border around image on lightbox pop up
body: <p>Hello I have added a image on pop up images that do not completely fill the img width and height, and it looks pretty cool.</p>
  
  <p>I am also wanting to add this same 6px border around all the pop up images ONLY, and so far I am able to get the image and title and close in the border, which is not what I am after.</p>
  
  <p>If you go here</p>
  
  <p><a href="http://dagrafixdesigns.com/2019/industrial-darker/graphics.html" rel="nofollow noreferrer">http://dagrafixdesigns.com/2019/industrial-darker/graphics.html</a></p>
  
  <p>Then click on the <strong>Rafters</strong> tab and then click the image of <strong>PIGSKIN</strong>, you will see a nice border and BG image on pop up....my code</p>
  
  <pre><code>.mfp-figure::after {
      background: #181818 none repeat scroll 0 0;
      border: 6px solid #333;
      bottom: 40px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
      content: "";
      display: block;
      height: auto;
      left: 0;
      position: absolute;
      right: 0;
      top: 40px;
      width: auto;
      z-index: -1;
  }
  </code></pre>
  
  <p>If you then close out and click the HELMET tab, and then a helmet, you will see a image with no border on pop out.</p>
  
  <p>Would there be a element to wrap the image only? or a pseudo class of :: to grab it?</p>
  
  <p>Thank you</p>