jquery - How to set the sliding DIV responsive to the size of the image width -

jquery - How to set the sliding DIV responsive to the size of the image width -

i have next html had image , displays caption when hovered:

<div style="width: 100%; border: 1px solid #cccccc; padding: 20px; overflow: hidden;"> <div class="cap-bot"> <img src="http://appcenter.clickmeeting.com/uploads/2014/05/google-calendar-logo1.gif" alt="" /> <figcaption>calendar events</figcaption> </div> </div>

css:

.cap-bot { display: block; position: relative; float: left; /* removing centers image */ overflow: hidden; margin: 0 0 0 0; text-align: center; } figcaption { width: 100%; position: absolute; background: #e55302; background: rgba(229,83,2,0.90); color: white; padding: 10px 0; opacity: 0; -webkit-transition: 0.6s ease; -moz-transition: 0.6s ease; -o-transition: 0.6s ease; } div:hover figcaption { opacity: 1; } .cap-bot:before { bottom: 10px; left: 10px; } .cap-bot figcaption { left: 0; bottom: -30%;} .cap-bot:hover figcaption { bottom: 0; }

i want center image , caption displayed on top of image , not entire div.

the float: left displays caption on image when removed image centered caption appears on entire div.

jsfidle: http://jsfiddle.net/69td39ha/3/

please help me modify code that image centered , caption appears width of image (with no fixed dimension set).

demo - http://jsfiddle.net/victor_007/69td39ha/4/

use display:inline-block .cap-bot , parent text-align:center

moved styles out

class="snippet-code-css lang-css prettyprint-override">.cap { width: 100%; border: 1px solid #cccccc; padding: 20px; overflow: hidden; text-align: center; } .cap-bot { display: inline-block; position: relative; overflow: hidden; margin: 0 0 0 0; text-align: center; } figcaption { width: 100%; position: absolute; background: #e55302; background: rgba(229, 83, 2, 0.90); color: white; padding: 10px 0; opacity: 0; -webkit-transition: 0.6s ease; -moz-transition: 0.6s ease; -o-transition: 0.6s ease; } div:hover figcaption { opacity: 1; } .cap-bot:before { bottom: 10px; left: 10px; } .cap-bot figcaption { left: 0; bottom: -30%; } .cap-bot:hover figcaption { bottom: 0; } class="snippet-code-html lang-html prettyprint-override"><div class="cap"> <div class="cap-bot"> <img src="http://appcenter.clickmeeting.com/uploads/2014/05/google-calendar-logo1.gif" alt="" /> <figcaption>calendar events</figcaption> </div> </div>

jquery html css image