CSS/JS Bildgröße anpassen, um Bildgröße anzupassen

Question

Ich experimentierte ein bisschen mit Übergängen und wollte eine Bildunterschrift für ein Bild auf: Hover zeigen. Das ist, was ich jetzt habe:
(ich versuchte, die Figur selbst mit den Größen des Bildes, um die Größe)

//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>

Die Figur nie wurde verkleinert.
Das Problem ist jetzt, dass die Figur irgendwie eine Breite von 100% hat und daher der :hover Effekt auch irgendwo neben dem Bild auslöst. Ich möchte die Größe der Figur nicht manuell einstellen. Und als ich versuchte, figure>img:hover figcaption { /* do stuff */ } (um die Bildunterschrift nur auf Bild Hover einblenden) funktioniert es irgendwie nicht mehr. So
denn das tut sie nicht für mich gearbeitet, habe ich versucht, die Eltern, um die Größe entsprechend seine Kinder Größe ...

Answer 1

ist es das, was Sie wollen?

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>