Did a quick check of your code—on macOS with Firefox and Safari, looks to be fine. Is there any type of error you are seeing? Per file permissions, it shouldn't be an issue if you are loading these from a common documents folder on your system.
body {
margin: 0;
padding: 0;
min-height: 100vh;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
font-family: consolas;
}
.container {
width: 1000px;
position: relative;
display: flex;
justify-content: space-between;
background-color: #fff;
}
.card {
position: relative;
}
.card .face {
width: 300px;
height: 200px;
transition: 0.5s;
}
.card .face1 {
position: relative;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
transform: translateY(100px);
}
.card:hover .face1 {
transform: translateY(0);
}
.card .face2 {
position: relative;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
transform: translateY(-100px);
}
.card:hover .face2 {
transform: translateY(0);
}
.card .content p {
margin: 0;
padding: 0;
}
<div class="container">
<div class="card">
<div class="face face1">
<div class="content">
<img src="home.png">
</div>
</div>
<div class="face face2">
<div class="content">
<p>dfhj dkcfbjkfdcjbh fkcjbhfc.l igJSz/dfilbdo igjd;ofijvodlkjs spdjivorghosdje.kd oslghodf</p>
</div>
<a href="#">Read More...</a>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<img src="home.png">
</div>
</div>
<div class="face face2">
<div class="content">
<p>dfhj dkcfbjkfdcjbh fkcjbhfc.l igJSz/dfilbdo igjd;ofijvodlkjs spdjivorghosdje.kd oslghodf</p>
</div>
<a href="#">Read More...</a>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<img src="home.png">
</div>
</div>
<div class="face face2">
<div class="content">
<p>dfhj dkcfbjkfdcjbh fkcjbhfc.l igJSz/dfilbdo igjd;ofijvodlkjs spdjivorghosdje.kd oslghodf</p>
</div>
<a href="#">Read More...</a>
</div>
</div>
</div>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…