Question

首先，如果我没有正确解释，我很抱歉，如果您不理解某事，请告诉我！

我有一个图库，每张图片都有悬停效果this one。当我单击链接时，将打开一个引导模式。直到这里工作正常，但当我关闭模态时，图像显示不正确（第一个应该与第二个相同的大小和位置）：

这是此部分的HTML：

<div class="col-md-4 col-xs-6 effect">
    <figure class="portfolio-item">
        <img src="images/carrera.jpg" class="img-responsive" alt="">
        <figcaption>
            <h3>hello</h3>
            <span>Hello</span>
            <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">More</a>
        </figcaption>
    </figure>
</div>

CSS非常大：

.effect {
   padding: 10px 10px;
   margin: 0 auto;
   list-style: none;
   text-align: center;
}
.effect figure {
   margin: 0;
   position: relative;
   overflow: hidden;
   text-align: left;
}
.effect figure img {
   max-width: 100%;
   display: block;
   position: relative;
   transition: transform 0.4s;
}
.effect figure:hover img {
   transform: translateY(-25px);
}
.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;
}
.effect figure:hover figcaption {
   opacity: 1;
   transform: translateY(0);
   transition: transform 0.4s, opacity 0.1s;
}
.effect figcaption h3 {
   margin: 0;
   padding: 0;
   color: #C5DBCB;
   font-size: 14px;
}
.effect figcaption span {
   color: #F3D85E;
   font-size: 10px;
}
.effect figcaption a {
   text-transform: uppercase;
   padding: 2px 3px;
   border-radius: 2px;
   display: inline-block;
   background: #F3D85E;
   color: #26BC8A;
   position: absolute;
   right: 5px;
   bottom: 10px;
   font-size: 12px;
}

我试图找到一个解决方案，然而，我意识到使用那么多代码难以解决，所以如果问题太多，我会使用其他效果回答。

非常感谢你们

Answer 1

由于属性function changeImage(){ var startMask = "http://den-sidste-balkjole.net78.net/files/img"; var endMask = ".png"; var startSrc = document.getElementById("imgClickAndChange").src; var oldImageNumber = parseInt(startSrc.substr(startMask.length).substr(0, startSrc.length - startMask.length - endMask.length)); var newImageNumber = oldImageNumber % 6 + 1; document.getElementById("imgClickAndChange").src = startMask + newImageNumber + endMask; }和transform: translateY(100%);跟随选择器，图像在模态关闭后停滞的原因

transform: translateY(0%);

Fiddle with stuck images

删除这些.effect figcaption { display: inherit; 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; } .effect figure:hover figcaption { opacity: 1; transform: translateY(0%); transition: transform 0.4s, opacity 0.1s; }属性，它将解决问题。

transform

Working Fiddle Example

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

1 个答案: