CSS/JS画像のサイズに合わせてFigureをサイズ変更

Question

私はトランジションで小さなビットを実験し、画像のキャプションを表示したい：ホバー。これは私が今得たものである：
数字がサイズ変更しなかったん

//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 */ }を試してみると（キャプチャが画像のホバーでのみフェードインされるようにするために）、何とかしなくなった。そのいけないが、私のために働いたので
だから、私はその子供のサイズに応じて、親のサイズを変更しようとした...

Answer 1

はあなたのために行っていた何本ですか？

figcaption { 
 
    position: absolute; 
 
    display: block; 
 
    background: rgba(0, 0, 0, 0.75); 
 
    color: white; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    width: 0; 
 
    /* unvisible to fade in later */ 
 
    top: 0; 
 
    left: 0; 
 
    /* unvisible to fade in later */ 
 
    -webkit-transition: all 0.6s ease; 
 
    -moz-transition: all 0.6s ease; 
 
    -o-transition: all 0.6s ease; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
figure { 
 
    display: table; 
 
    position: relative; 
 
    overflow: hidden; 
 
    border: 1px solid; 
 
    /** 
 
    * only an example 
 
    */ 
 
    width: 500px; 
 
    height: 100px; 
 
} 
 
figure img { 
 
    display: block; 
 
    width: 100%%; 
 
    height: 100%; 
 
} 
 
figure > .image-container { 
 
    width: auto; 
 
    display: block; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
figure > .image-container:hover { 
 
    width: 100%; 
 
} 
 
figure > .image-container:hover figcaption { 
 
    padding: 10px 20px; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<figure> 
 
    <div class="image-container"> 
 
    <img class="img-middle" src="http://lorempixel.com/400/200/" alt="" width="100%" /> 
 
    <figcaption>This is a cool caption</figcaption> 
 
    </div> 
 
</figure>