[英]How to set the sliding DIV responsive to the size of the image width
我有以下具有图像并在悬停时显示标题的HTML:
<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 this centers the 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: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 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; }
我想将图像和标题居中显示在图像顶部,而不是整个DIV。
float: left
仅在图像上显示标题,但是在删除该图像时,图像居中,但该标题显示在整个DIV上。
JSFidle: http : //jsfiddle.net/69td39ha/3/
请帮助我修改代码,以使图像居中,并且标题显示图像的宽度(未设置固定尺寸)。
演示-http://jsfiddle.net/victor_007/69td39ha/4/
将display:inline-block
用于.cap-bot
和父text-align:center
移出样式
.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: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 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; }
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.