0
我已經嘗試了其他用戶向Stackoverflow用戶提出的或多或少相同問題的方法，但儘管在我的代碼中使用了相同的方法，文本最終顯示在img下方。如何在img link hover上顯示文字？
我也遵循這種方法：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade但同樣的事情發生。
html,
body {
font-family: ;
margin: 0 auto;
padding: 10px;
text-transform: none;
font-family: europa;
font-weight: 400;
font-style: normal;
line-height: 1.3em;
letter-spacing: 0em;
text-transform: none;
color: #000;
}
.header h1 {
background-color: ;
margin: 0 auto;
padding: 10px;
display: inline-block;
font-size: 15px;
letter-spacing: 0.8px;
}
.header .nav {
float: right;
display: inline-block;
padding: 10px;
font-size: 15px;
letter-spacing: 0.8px;
}
.header .nav a {
font-family: Europa;
color: black;
padding: 15px;
text-decoration: none;
}
.row {
margin: 0 auto;
display: inline-block;
}
.container-fluid {
padding: ;
margin: 0 auto;
}
#text {
font-family: europa;
font-weight: 400;
font-style: normal;
font-size: 3em;
line-height: 1.3em;
letter-spacing: 0em;
text-transform: none;
color: #000;
width: 50%;
padding: 10px;
}
.col-md-6 {
margin: 0 auto;
width: 50%;
float: left;
text-align: center;
padding: 10px;
background-color: #fff;
height: 100%;
}
.col-md-6 .wrapper {
padding: 0;
border: 0px solid black;
}
.col-md-6 .wrapper img {
max-width: 100%;
max-height: 100%;
}
.col-md-6 .wrapper img:hover {
opacity: 0.6;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
}
@media only screen and (max-width: 800px) {
.col-md-6 {
float: none;
background-color: none;
display: inline-block;
padding: 10px;
margin: 0;
width: 100%;
}
#text {
float: none;
display: inline-block;
padding: 10px;
margin: 0;
width: 100%;
}
.header .nav {
display: inline-block;
padding: 10px;
margin: 0;
}
.header .nav a {
padding-left: 0;
}
.header h1 {
display: inline-block;
padding: 10px;
margin: 0;
}
}
@media only screen and (max-width: 400px) {
.col-md-6 {
float: none;
background-color: none;
display: inline-block;
padding: 10px;
margin: 0;
width: 100%;
}
#text {
float: none;
display: inline-block;
padding: 10px;
margin: 0;
width: 100%;
}
.header .nav {
display: inline-block;
padding: 10px;
margin: 0;
width: 100%;
}
.header .nav a {
padding-left: 0;
}
.header h1 {
display: inline-block;
padding: 10px;
margin: 0;
width: 100%;
}
span.text-content {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.img-list {
display: inline-block;
height: 150px;
margin: 0 1em 1em 0;
position: relative;
width: 150px;
}
span.text-content {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
}
.img-list:hover span.text-content {
opacity: 1;
}
span.text-content {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Merriweather|Europa">
</head>
<body>
<div class="header">
<div class="container-fluid">
<h1 id="firstName">Header</h1>
<div class="nav">
<a href="#">About</a>
<a href="#">Work</a>
<a href="#">Photo</a>
<a href="#">Blog</a>
</div>
</div>
</div>
<div class="container-fluid">
<h1 id="text">Design & code.</h1>
<div class="col-md-6">
<div class="wrapper">
<a href="">
<img src="http://via.placeholder.com/350x150">
</a>
</div>
</div>
<div class="col-md-6">
<div class="wrapper">
<a href="#">
<img src="http://via.placeholder.com/350x150" />
</a>
</div>
</div>
<div class="col-md-6">
<div class="wrapper">
<div class="img-list">
<a href="#">
<img src="http://via.placeholder.com/350x150" />
<span class="text-content"><span>Place Name</span></span>
</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="wrapper">
<a href="#">
<img src="http://via.placeholder.com/350x150" />
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
你忘了在某處設置一個定位上下文（'position：relative'）嗎？ –
你可以插入一段代碼，以便我們看到你得到的輸出。 – DivyaMaheswaran