img not displaying properly after closing bootstrap modal

问题

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!

回答1:

The issue seems be the

overflow: hidden;

in this css rule:

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

if you remove the issue is fixed.

another work around:

    .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; */
}

the translateY is not working as expected.

来源：https://stackoverflow.com/questions/32741456/img-not-displaying-properly-after-closing-bootstrap-modal