关闭bootstrap模式后img无法正常显示

时间:2015-09-23 13:49:06

标签: css3 twitter-bootstrap-3 css-transitions bootstrap-modal

我正在尝试构建一个图库,其中每个图片都有悬停效果(this one)。当我浏览图像并单击里面的链接时,会打开一个引导模式,显示一些内容。

直到此处工作正常,但是当我关闭此模式时,图像无法在主页面中正确显示。你可以在这里看到我的问题:

http://www.bootply.com/90dGFlCrxI

任何人都能解释一下我做错了什么吗? 非常感谢你们!

1 个答案:

答案 0 :(得分:2)

问题似乎是

  

溢出:隐藏;

在这个css规则中:

          .effect figure {
               margin: 0;
               position: relative;
               /*overflow: hidden;*/
               text-align: left;
           }

如果删除问题,则修复。

另一种解决方法:

    .effect figcaption {
        position: absolute;
        width: 100%;
        left: 0;
        padding: 7px;
        background: #26BC8A;
        color: #ed4e6e;
        height: 50px;
        top: auto;
        bottom: 0;
        opacity: 0;
       /* transform: translateY(100%); */
       /* transition: transform 0.4s, opacity 0.1s 0.3s; */
}

translateY未按预期工作。