img在關閉引導模式後無法正常顯示

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

原因圖像翹起模式關閉後，由於財產transform: translateY(100%);和transform: translateY(0%);下選擇的，

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

Fiddle with stuck images

刪除這些transform性能，它可以將修復問題。

.effect figcaption { 
    display: inherit; 
    position: absolute; 
    width: 100%; 
    left: 0; 
    padding: 7px; 
    background: #26BC8A; 
    color: #ed4e6e; 
    height: 50px; 
    top: auto; 
    bottom: 0; 
    opacity: 0; 
    transition: transform 0.4s, opacity 0.1s 0.3s; 
} 
.effect figure:hover figcaption { 
    opacity: 1; 
    transition: transform 0.4s, opacity 0.1s; 
} 

Working Fiddle Example