我試圖在用戶將滑鼠懸停在圖片上時，在圖片頂部顯示一點著作權文本，使用這個例子。
我錯過了什么，我沒有看到文本，只有褪色效果？
<div class="list-group-item"> /span>
<div class=" row">
<div class="col-12 col-md-4 vertical-center-col"/span>>
< img class="img-thumbnail" src="media/images/EmployeeOne. jpg" alt=">
</div>/span>
<div class="middle">
<div class="text"/span>> 圖片著作權</div>
</div>/span>
<div class="col-12 col-md-8 mt-2 mt-md-0"/span>>
<strong>/span>EmployeeOne</strong>/span>
</div>/span>
</div>/span>
</div>/span>
這是我的css檔案：
.card-img-top {
min-height: 0.1px;
}
img.img-thumbnail {
邊框。1px solid #e4c9c9;
寬度：100%。
高度：自動。
過渡。0.5s ease;
背面可見度: 隱藏。
}
.middle {
過渡。0.5s ease;
不透明度：0。
位置：絕對。
頂部。50%;
左：50%。
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
文字對齊：居中。
}
.text {
背景顏色。#04aa6d;
顏色：白色。
字體大小: 16px;
padding: 16px 32px。
}
.img-thumbnail:hover {
不透明度: 0.3;
}
.img-thumbnail:hover .middle {
opacity: 1;
}
uj5u.com熱心網友回復：
將你的.middle div放在與你的圖片相同的容器內，然后通過使用相鄰的兄弟姐妹CSS選擇器選擇它
.card-img-top {
min-height: 0.1px;
}
img.img-thumbnail {
border: 1px solid #e4c9c9;
width: 100%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
}
.middle {
transition: 0.5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate（-50%, -50%）。
-ms-transform: translate（-50%, -50%）。
text-align: center;
z-index: 1;
pointer-events: none;
}
.text {
background-color: #04aa6d;
color: white;
字體大小: 16px;
padding: 16px 32px。
}
.img-thumbnail：hover {
opacity: 0.3;
}
.img-thumbnail:hover .middle {
opacity: 1;
}< div class="list-group-item"/span>>
<div class=" row">
<div class="col-12 col-md-4 vertical-center-col"/span>>
<img class="img-thumbnail"/span> src="https://www. gardendesign.com/pictures/images/675x529Max/site_3/helianthus-yellow-flower-pixabay_11863.jpg" alt=">
<div class="middle">
<div class="text"/span>> 圖片著作權</div>
</div>/span>
</div>/span>
<div class="col-12 col-md-8 mt-2 mt-md-0"/span>>
<strong>員工姓名</strong>/span>
</div>/span>
</div>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/326116.html
標籤：
上一篇：在改變顯示方式時提交的表格