title: Hover:before not working in Safari
body: <p>I have a website with some images which when hovered over reveal a text and link over the image with a solid colored background. This effect though is not working in Safari and I can't figure out which could be causing the issue.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="link-wrapper"&gt;
    &lt;div class="textwidget"&gt;
      &lt;section class="fg-grid-view clearfix"&gt;
        &lt;div class="fb-gallery"&gt;
          &lt;div class="fg-grid-img"&gt;
            &lt;a href="http://www.website.com" target="_blank" rel="noopener"&gt;
              &lt;img src="http://valokuvakeskusnykyaika.fi/wp-content/uploads/2013/05/28.12.2011_S.K.-290x290.jpg" title="Image"&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="fg-grid-hover"&gt;
            &lt;h6&gt;
              &lt;a href="http://www.website.com" target="_blank" rel="noopener"&gt;Website&lt;/a&gt;
            &lt;/h6&gt;
            &lt;p&gt;Some text here to describe the link&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.wrapper { width: 25%; padding: 5px; }
  section { display: block; }
  section.fg-grid-view { text-align: center; }
  .clearfix:before { content: ""; display: table; }
  .textwidget &gt; .fg-grid-view &gt; .fb-gallery { width: 100%; }
  .fg-grid-view .fb-gallery { box-sizing: content-box; padding: 0 0 1.5em 0; float: left; position: relative; }
  .fg-grid-view .fb-gallery:hover:before { transition: opacity 0.3s linear; opacity: 1; }
  .textwidget &gt; .fg-grid-view .fb-gallery:before { background: rgba(100, 100, 100, 1); }
  .fg-grid-view .fb-gallery:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s linear;
  }
  .fg-grid-hover {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 99;
    text-align: center;
    padding: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    opacity: 0;
    visibility: hidden;
    margin-top: 40px;
    transition: all 0.5s ease-in-out;
  }
  .textwidget &gt; .fg-grid-view .fb-gallery .fg-grid-hover p { color: #ffffff; }
  .fb-gallery:hover .fg-grid-hover { opacity: 1; visibility: visible; margin-top: 0; }
  .fg-grid-hover h6 a { font-size: 2.5em; color: #ffffff; text-decoration: none; }
  </code></pre>
  
  <p>Here is a JSfiddle: <a href="https://jsfiddle.net/45zt2n91/1/" rel="nofollow noreferrer">https://jsfiddle.net/45zt2n91/1/</a></p>