0
我正在嘗試爲圖片使用疊加效果，但我無法完全適合圖片的大小。如何適應覆蓋到圖像的確切大小？
這裏是我的鏈接代碼筆：https://codepen.io/saisree/pen/OmKMgm
<div class="row">
<header class="text-center sec-heading">
<h2>Meet the Family</h2>
<span class="subheading">We are the ones!</span>
</header>
<div class="a col-lg-4 col-md-6 mb-sm-50">
<img style="height:100%;width:100%;" class="a img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
這裏是CSS：/ *。
.myjumbotron{
background-color: black;
} */
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}
.jumbotron {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
background-position: center;
background-size: cover;
}
h3{
text-color:black;
}
#family h2{
color: black;
text-decoration:none;
}
#Nav h3{
color: black;
text-decoration:none;
}
/* .wrapper {
position: relative;
padding: 0;
width:100px;
display:block;
}
.text {
position: absolute;
top: 0;
color:#f00;
background-color:rgba(255,255,255,0.8);
width: 100px;
height: 100px;
line-height:100px;
text-align: center;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:1;
}
img {
z-index:1;
}
*/
.text {
white-space: nowrap;
color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.a:hover .overlay {
height: 100%;
}
.b:hover .overlay {
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: white;
overflow: hidden;
width:100%;
height: 0;
transition: .5s ease;
}
/* .team-item {
display:inline-block;
background:red;
margin-bottom:10px;
}
*/
任何形式的幫助將不勝感激！