This code below is adding the issue in Safari but I don’t know why. It’s used to style the images on this page: https://www.newsite.jessicaquadra.com/galleries
}
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
height: 363px;
margin: 0 0;
position: relative;
width: 238px;
}
ul.img-list img {
border-radius: 8px;
}
span.text-content {
background: rgba(0,0,0,0.5);
border-radius: 10px;
color: white;
cursor: pointer;
display: table;
font-size: 15px;
font-family: 'Old Standard TT', serif;
line-height: 278px;
letter-spacing: .14em;
height: 363px;
left: -1px;
position: absolute;
top: -1px;
width: 238px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.location {
background: rgba(0,0,0,0);
border-radius: 10px;
color: white;
cursor: pointer;
display: table;
font-size: 14px;
font-family: 'Old Standard TT', serif;
font-style: italic;
line-height: 325px;
letter-spacing: .14em;
height: 363px;
left: -1px;
position: absolute;
top: -1px;
width: 238px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.location span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
ul.img-list li:hover span.location {
opacity: 1;