figure と figcaption を使用して画像上の見出しを遷移させていますが、遷移は正常に機能しますが、figcaption の背景は実際の画像のすぐ外側 (上部) に数ピクセルあります。
コードを調べて、マージン、パディング、および位置の設定を変更しましたが、トランジション時に figcaption の背景が下に移動した理由がわかりません。
ここに私のHTMLコードがあります:
<figure>
<img src="images/melon.jpg" alt="melon"></a>
<figcaption>
<h3><a href="mywebsite.com">Live Demo or Buy Now</a></h3>
</figcaption>
</figure>
ここに私のcssがあります
figure {
cursor: pointer;
margin: 0;
overflow: hidden;
position: relative;
float: left;}
figure:hover figcaption {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
bottom: 0;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
figure a {
color: white;
text-decoration: none;
}
figcaption {
background-color: rgba(46, 204, 113, .6);
height: 183px;
opacity: 0;
position: absolute;
bottom: -100%;
width: 360px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: all .4s ease-in;
-moz-transition: all .4s ease-in;
-o-transition: all .4s ease-in;
-ms-transition: all .4s ease-in;
transition: all .4s ease-in;
}
figcaption h3 {
background-color: rgba(0, 0, 0, .4);
font-family: 'Lato', sans-serif;
font-weight: 300px;
left: -100%;
margin: 0;
margin-top: 63px;
padding: 10px 20px;
position: relative;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
-ms-transition: all .4s;
transition: all .4s;
-webkit-transition-delay: .5s;
-moz-transition-delay: .5s;
-o-transition-delay: .5s;
-ms-transition-delay: .5s;
transition-delay: .5s;
}
figure:hover h3 {
left: 0;}