0
我嘗試了一點點過渡,並希望顯示一個圖像的標題:懸停。這是我現在:
(我試圖調整數字本身與圖像的大小)CSS/JS調整大小以適應圖像大小
//Resize figure to image size
$(document).ready(function() {
$("figure>img").load(function() {
$(this).parent().width($(this).width());
});
});
figure {
display: table;
position: relative;
overflow: hidden;
}
figcaption {
position: absolute;
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 10px 20px;
opacity: 0;
/* unvisible to fade in later */
bottom: 0;
left: 0;
display: none;
/* unvisible to fade in later */
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
/* visible */
left: 0;
display: inline-block;
/* visible */
}
.img-middle {
height: 60%;
width: 60%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<img class="img-middle" src="img/test.png" alt="" width="700" height="500"></img>
<figcaption>This is a cool caption</figcaption>
</figure>
這個數字從來就沒有調整。
現在的問題是,該數字以某種方式具有100%的寬度,因此:hover
效果也會觸發圖像旁邊的某處。我不想手動設置圖形的大小。當我試圖figure>img:hover figcaption { /* do stuff */ }
(爲了只在圖像懸停時觸發字幕褪色),它以某種方式不再工作。
所以,因爲不要爲我工作,我試圖根據其兒童大小來調整父...
不固定在解決方案中的數字大小? – Drayke
哦,你希望它改變,只想到標題 – WalksAway
它改變什麼事件? – WalksAway