Question

我为我的新网站创建了这一系列图像。我可能已经使它模式复杂，它需要，但这是我想到的唯一方式来实现这种效果。当您将鼠标悬停在图像上时，名称会以半透明的颜色显示，当您单击灯箱时会出现。

<div class="actress-photos-div">
    <div class="actress-photo1">
           <div class="1-wrap actress-photo"><a href="#1-popup" class="open-popup-link"><div class="1-mask mask"><div>Actress 1</div></div></a><div class="photo"><img src="IMG/1.jpg"/></div></div>
           <div class="2-wrap actress-photo"><a href="#2-popup" class="open-popup-link"><div class="2-mask mask"><div>Actress 2</div></div></a><div class="photo"><img src="IMG/2.jpg"/></div></div>
           <div class="3-wrap actress-photo"><a href="#3-popup" class="open-popup-link"><div class="3-mask mask"><div>Actress 3</div></div></a><div class="photo"><img src="IMG/3.jpg"/></div></div>
    </div>
</div>

它在Chrome和Firefox上运行良好，但图片根本不会出现在Safari上。面具出现但最小尺寸。链接有效。

这是CSS，我想如果我删除了课程＆＃34;照片＆＃34;它有效，但我丢失了所有的格式..

.actress-photos-div{
    position:relative;
    display:block;
    width:85vw;
    margin-top:20px;
    height:38vw;
    }

 .actress-photo1{
    position:inherit;
    float:left;
    width:38%;
    height:100%;
    left:0%;
    }

.mask{
    background-color:rgba(227,210,23,0.84);
    z-index:20;
    position:absolute;
    visibility:hidden;
    float:left;
    width:100%;
    height:100%;
    display:table;
    }

.mask div{
    color:white;
    font-size:25px;
    height:20px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    }

.photo{
    position:absolute;
    float:left;
    width:100%;
    height:100%;
    max-width: intrinsic;
    max-width: -moz-max-content;
    max-width: 100%;
    }

.photo img{
    width:100%;
    height:100%;
    }   

.alfre-wrap{
    width:98%;
    height:60%;
    }

.alfre-wrap:hover .alfre-mask{
    visibility:visible;
    }

有没有办法让它与Safari兼容？

图像未显示在Safari上

0 个答案: