img在关闭引导模式后不能正常显示 [英] img not displaying properly after closing bootstrap modal

问题描述

我想建立一个图片库，每个图片都有悬停效果（ this one < a>）。当我jhover的图像，并单击里面的链接，一个引导模式打开显示一些内容。

I'm trying to build a gallery where every image has a hover effect (this one). When I jhover the image and click the link inside , a bootstrap modal opens showing some content.

直到这里工作正常，但是，当我关闭这个模态，无法在主页面中正确显示。您可以在这里看到我的问题：

Until here works fine, however, when I close this modal, the image is not displaying properly in the main page. You can see my problem here:

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

任何人都可以向我解释我做错了什么？
非常感谢！

Can anyone explain me what am I doing wrong? Thanks very much guys!

推荐答案

问题似乎是

overflow：hidden;

overflow: hidden;

在此css规则中：

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

如果您删除此问题已修复。

if you remove the issue is fixed.

另一个工作：

    .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无法正常工作。

the translateY is not working as expected.

这篇关于img在关闭引导模式后不能正常显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！