悬停：在Safari

不工作之前，我有一些图片，其上空盘旋时透露了坚实的彩色背景上的文本和链接在图片上的网站。这种效果虽然在Safari中不起作用，但我无法弄清楚哪些可能导致问题。悬停：在Safari

HTML

<div class="link-wrapper"> 
    <div class="textwidget"> 
    <section class="fg-grid-view clearfix"> 
     <div class="fb-gallery"> 
     <div class="fg-grid-img"> 
      <a href="http://www.website.com" target="_blank" rel="noopener"> 
      <img src="http://valokuvakeskusnykyaika.fi/wp-content/uploads/2013/05/28.12.2011_S.K.-290x290.jpg" title="Image"> 
      </a> 
     </div> 
     <div class="fg-grid-hover"> 
      <h6> 
      <a href="http://www.website.com" target="_blank" rel="noopener">Website</a> 
      </h6> 
      <p>Some text here to describe the link</p> 
     </div> 
     </div> 
    </section> 
    </div> 
</div>

CSS

.wrapper { width: 25%; padding: 5px; } 
section { display: block; } 
section.fg-grid-view { text-align: center; } 
.clearfix:before { content: ""; display: table; } 
.textwidget > .fg-grid-view > .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 > .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 > .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; }

这里是一个的jsfiddle：https://jsfiddle.net/45zt2n91/1/

来源

2017-07-18 user1589375