覆盖悬停效果

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

希望这有助于..