调整Safari的悬停

Question

我正在整理我的网站，唯一不起作用的是我在画廊中徘徊。每张图像的亮度为25％，并且在其上方有文字之前，将光标移到其上，然后亮度应为100％，文字应消失。在手机上不工作，请您帮忙吗？

.row {
display: flex;
flex-wrap: wrap;
position: center;
padding: 0 4px;
margin-left: 1.2%;
margin-top: 100px;
}


.column {
flex: 10%;
max-width: 10%;
padding: 0 6px;
margin: 79px;;

 }

 .holder{
  position:relative;
  display:inline-block;


 }

 .holder:hover img{
  filter: brightness(100%);
 }


.column img {
filter: brightness(35%);
margin-top: 10px;
vertical-align: middle;
display: block;
align-content: center;
max-width: 300px;
transition: filter 0.5s;

}


.column p{
 position: absolute;
display:flex;
justify-content:center;
align-items:center;
z-index: 1;
text-align: center;
top:0;
bottom:0;
left:0;
right:0;
color: white;
font-family: 'Poiret One', cursive;
font-size: 20px;
font-weight: bold;
opacity:1;
transition: opacity 1s;
margin-left: 2%;
margin-right: 2%;
}
.column p:hover{
opacity:0;
}

和我的html

<div class="row" aria-haspopup="true"> 
  <div class="column">

  <div class='holder'>
<img src="/artbook/28.png" >
<p>people will give you labels.<br>Even if you dont want them.</br>Even     though it hurts.<br></br></p>
</div>

  <div class='holder'>
<img src="/artbook/24.png">
<p> </p>
</div>

   <div class='holder'>
<img src="/artbook/1.png">
<p> Hanging there, <br> In the empty space<br><br>
With noone who would love<br>
- noone who would care. </p>
</div>

    <div class='holder'>
<img src="/artbook/20.png">
<p>  </p>
</div>