覆蓋懸停效果

Question

我不能解決這個問題，我想做出覆蓋懸停效果，當鼠標放在圖像上方時，會有圖層和文字出來。但現在不能，有7張圖像，當鼠標觸摸它們時，所有圖像同時具有疊加效果，並且不會消失。非常感謝。

HTML

<article class="col-md-4 isotopeItem sm"> 
           <div class="portfolio-item"> 
            <div class="content-item"> 
            <a href="https://www.w3schools.com"> 
             <img src="img/Case Study/Hotel-Kitchen-Equipment.jpg" alt="Kitchen" style="width:360px;height:292px;"> 
             <div class="overlay"></div> 
             <div class="corner-overlay-content">Kitchen</div> 
             <div class="overlay-content"> 
              <p>Kitchen</p> 
             </div> 
            </a> 
            </div> 
           </div> 
          </article> 

CSS

.portfolio-items article img {width:100%;} 
 

 
.portfolio-item { 
 
\t display: block; 
 
\t position: relative; 
 
\t -webkit-transition: all 0.2s ease-in-out; 
 
\t -moz-transition: all 0.2s ease-in-out; 
 
\t -o-transition: all 0.2s ease-in-out; 
 
\t transition: all 0.2s ease-in-out; 
 
\t 
 
} 
 
.portfolio-item img { 
 
\t -webkit-transition: all 300ms linear; 
 
\t -moz-transition: all 300ms linear; 
 
\t -o-transition: all 300ms linear; 
 
\t -ms-transition: all 300ms linear; 
 
\t transition: all 300ms linear; 
 
\t background: #fff; 
 
\t opacity:0.9; \t 
 
} 
 

 
.portfolio-item .portfolio-desc { 
 
    display: block; 
 
    opacity: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
\t left: 0; 
 
\t top: 0; 
 
\t color: rgba(220, 220, 220, 0.7); 
 
} 
 
.portfolio-item:hover .portfolio-desc { 
 
\t padding-top: 20%; 
 
\t height: 100%; 
 
    transition: all 200ms ease-in-out 0s; 
 
\t opacity: 1; 
 
} 
 

 
.portfolio-item .portfolio-desc a { 
 
\t color: #ED502E; 
 
} 
 
.portfolio-item .portfolio-desc a:hover { 
 
\t /*text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);*/ 
 
\t text-decoration: none; 
 
} 
 
.portfolio-item .portfolio-desc .folio-info { 
 
\t top:-20px; \t 
 
\t padding: 30px; 
 
\t height: 0; 
 
    opacity: 0; 
 
    position: relative; 
 
} 
 
.portfolio-item:hover .folio-info{ 
 
\t height: 100%; 
 
    opacity: 0.8; 
 
    transition: all 500ms ease-in-out 0s; 
 
\t top:-10px; 
 
} 
 

 

 
.portfolio-item .portfolio-desc .folio-info h5 { 
 
\t text-transform: uppercase; 
 
\t 
 
} 
 
.portfolio-item .portfolio-desc .folio-info p { 
 
\t 
 
\t font-size: 12px; 
 
} 
 
.content-item{ 
 
    overflow: hidden; 
 
    backface-visibility: hidden; 
 
\t 
 
} 
 
.overlay{ 
 
    border-bottom: 76px solid #000000; 
 
    border-left: 360px solid #000000; 
 
    bottom: 0; 
 
    height: 0; 
 
    opacity: .65; 
 
    position: absolute; 
 
    right: 0; 
 
    text-indent: -9999px; 
 
    transition: all .9s ease-out; 
 
    width: 0; 
 
    } 
 
:hover .overlay{ 
 
    border-bottom: 292px solid #000000; 
 
    border-left: 360px solid #000000; 
 
    transition: all .9s ease-out; 
 
    } 
 
    .corner-overlay-content{ 
 
    bottom: 26px; 
 
    color: #ffffff; 
 
    position: absolute; 
 
    right: 114px; 
 
    transition: all .5s ease-out; 
 
    font-size: 40px; 
 
    } 
 
    :hover .corner-overlay-content{ 
 
    opacity: 0; 
 
    transition: all .10s ease-out; 
 
    } 
 
    .overlay-content{ 
 
    bottom: 0; 
 
    color: #333; 
 
    left: 0; 
 
    opacity: 0; 
 
    padding: 30px; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    transition: all .10s ease-out; 
 
} 
 
.overlay-content p{ 
 
    color: #ffffff; 
 
    position: absolute; 
 
    right: 114px; 
 
    font-size: 40px; 
 
    bottom: 124px; 
 
} 
 

 
:hover .overlay-content{ 
 
    opacity: 1; 
 
    transition: all .5s ease-out; 
 
}

<article class="col-md-4 isotopeItem sm"> 
 
\t \t \t \t \t \t \t \t \t <div class="portfolio-item"> 
 
\t \t \t \t \t \t \t \t \t \t <div class="content-item"> 
 
\t \t \t \t \t \t \t \t \t \t <a href="@"> 
 
\t \t \t \t \t \t \t \t \t \t \t <img src="img/Case Study/Hotel-Kitchen-Equipment.jpg" alt="Kitchen" style="width:360px;height:292px;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t <div class="overlay"></div> 
 
    \t \t \t \t \t \t \t \t \t \t \t <div class="corner-overlay-content">Kitchen</div> 
 
    \t \t \t \t \t \t \t \t \t \t \t <div class="overlay-content"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t <p>Kitchen</p> 
 
    \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t </a> 
 
    \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t </article>

Answer 1

試試這個代碼

CSS

.portfolio-items article img { 
    width: 100%; 
} 

.portfolio-item { 
    display: block; 
    position: relative; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 
.portfolio-item img { 
    -webkit-transition: all 300ms linear; 
    -moz-transition: all 300ms linear; 
    -o-transition: all 300ms linear; 
    -ms-transition: all 300ms linear; 
    transition: all 300ms linear; 
    background: #fff; 
    opacity: 0.9; 
} 

.portfolio-item .portfolio-desc { 
    display: block; 
    opacity: 0; 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    color: rgba(220, 220, 220, 0.7); 
} 
.portfolio-item:hover .portfolio-desc { 
    padding-top: 20%; 
    height: 100%; 
    transition: all 200ms ease-in-out 0s; 
    opacity: 1; 
} 

.portfolio-item .portfolio-desc a { 
    color: #ED502E; 
} 
.portfolio-item .portfolio-desc a:hover { 
    /*text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);*/ 
    text-decoration: none; 
} 
.portfolio-item .portfolio-desc .folio-info { 
    top: -20px; 
    padding: 30px; 
    height: 0; 
    opacity: 0; 
    position: relative; 
} 
.portfolio-item:hover .folio-info { 
    height: 100%; 
    opacity: 0.8; 
    transition: all 500ms ease-in-out 0s; 
    top: -10px; 
} 

.portfolio-item .portfolio-desc .folio-info h5 { 
    text-transform: uppercase; 
} 
.portfolio-item .portfolio-desc .folio-info p { 
    font-size: 12px; 
} 
.content-item { 
    overflow: hidden; 
    backface-visibility: hidden; 
} 
.overlay { 
    border-bottom: 76px solid #000000; 
    border-left: 360px solid #000000; 
    bottom: 0; 
    height: 0; 
    opacity: .65; 
    position: absolute; 
    right: 0; 
    text-indent: -9999px; 
    transition: all .9s ease-out; 
    width: 0; 
} 
.content-item:hover .overlay { 
    border-bottom: 292px solid #000000; 
    border-left: 360px solid #000000; 
    transition: all .9s ease-out; 
} 
.corner-overlay-content { 
    bottom: 26px; 
    color: #ffffff; 
    position: absolute; 
    right: 114px; 
    transition: all .5s ease-out; 
    font-size: 40px; 
} 
.content-item:hover .corner-overlay-content { 
    opacity: 0; 
    transition: all .10s ease-out; 
} 
.overlay-content { 
    bottom: 0; 
    color: #333; 
    left: 0; 
    opacity: 0; 
    padding: 30px; 
    position: absolute; 
    right: 0; 
    top: 0; 
    transition: all .10s ease-out; 
} 
.overlay-content p { 
    color: #ffffff; 
    position: absolute; 
    right: 114px; 
    font-size: 40px; 
    bottom: 124px; 
} 

.content-item:hover .overlay-content { 
    opacity: 1; 
    transition: all .5s ease-out; 
} 

你不應該使用：直接懸停。利用容器並在鼠標上方觸發效果。

link for reference

希望這有助於..