ul 목록의 이미지에 오버레이를 만들 수 있지만 이미지의 전체 섹션에 있지 않은 이미지에만 어떻게 할 수 있습니까?

Question

그래서 나는 이미지 목록을 가지고있다. 내가 이미지 위에 마우스 오버레이를 만들고 싶습니다.하지만 가지고 있습니다. 그러나 이미지 전체에만 적용되는 <li></li> 요소에서만 작동합니다. 이미지 위에 만 오버레이하고 싶습니다. 이미지의 회색 테두리는 1 픽셀입니다. 이미지에서 오버레이가 이미지보다 큰 크기임을 알 수 있습니다. (이미지의 첫 번째 행의 두 번째 이미지)

내 HTML 코드 :

<ul class="row portfolio-images-list justify-content-center justify-content-md-around justify-content-lg-around"> 
    <li class="portfolio-list-item col-md-6 col-lg-4"> 
    <img class="img-border img-fluid" src="images/portfolio_first.png" alt="First Image"> 
    <div class="overlay"> 
     <div class="overlay-content"> 
     <h3 class="overlay-header">Project Title</h3> 
     <a class="overlay-link" href="#">View Project</a> 
     </div> 
    </div> 
    </li> 
    <li class="portfolio-list-item col-md-6 col-lg-4"> 
    <img class="img-border img-fluid" src="images/portfolio_second.png" alt="Second Image"> 
    <div class="overlay"> 
     <div class="overlay-content"> 
     <h3 class="overlay-header">Project Title</h3> 
     <a class="overlay-link" href="#">View Project</a> 
     </div> 
    </div> 
    </li> 
    <li class="portfolio-list-item col-md-6 col-lg-4"> 
    <img class="img-border img-fluid" src="images/portfolio_third.png" alt="Third Image"> 
    <div class="overlay"> 
     <div class="overlay-content"> 
     <h3 class="overlay-header">Project Title</h3> 
     <a class="overlay-link" href="#">View Project</a> 
     </div> 
    </div> 
    </li> 
    <li class="portfolio-list-item col-md-6 col-lg-4"> 
    <img class="img-border img-fluid" src="images/portfolio_fourth.png" alt="Fourth Image"> 
    <div class="overlay"> 
     <div class="overlay-content"> 
     <h3 class="overlay-header">Project Title</h3> 
     <a class="overlay-link" href="#">View Project</a> 
     </div> 
    </div> 
    </li> 
    <li class="portfolio-list-item col-md-6 col-lg-4"> 
    <img class="img-border img-fluid" src="images/portfolio_fifth.png" alt="Fifth Image"> 
    <div class="overlay"> 
     <div class="overlay-content"> 
     <h3 class="overlay-header">Project Title</h3> 
     <a class="overlay-link" href="#">View Project</a> 
     </div> 
    </div> 
    </li> 
    <li class="portfolio-list-item col-md-6 col-lg-4"> 
    <img class="img-border img-fluid" src="images/portfolio_sixth.png" alt="Sixth Image"> 
    <div class="overlay"> 
     <div class="overlay-content"> 
     <h3 class="overlay-header">Project Title</h3> 
     <a class="overlay-link" href="#">View Project</a> 
     </div> 
    </div> 
    </li> 
</ul> 

내 말대꾸 :

.portfolio-list-item { 
    position: relative; 
    width: 50%; 

    .img-border { 
    padding: 10px 10px; 
    border: 1px solid #ededed; 
    } 

    .overlay { 
    position: absolute; 
    bottom: 0; 
    left: 100%; 
    right: 0; 
    background-color: #34495e; 
    overflow: hidden; 
    width: 0; 
    height: 100%; 
    transition: .5s ease; 
    } 

    &:hover .overlay { 
    width: 100%; 
    left: 0; 
    } 

    .overlay-content { 
    white-space: nowrap; 
    color: white; 
    position: absolute; 
    overflow: hidden; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    } 
} 

Answer 1

내가 당신의 기술 문제에 대한 조각을 만들었습니다. 아래 스 니펫을 확인하십시오. HTML 구조가 hover over의 image에만 올바르지 않습니다.

*, 
 
*:after, 
 
*:before{ 
 
    box-sizing: inherit; 
 
} 
 
html{ 
 
    box-sizing: border-box; 
 
} 
 
.container{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    width: 100%; 
 
} 
 
@media (min-width: 992px){ 
 
    width: 960px; 
 
} 
 
ul{ 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    margin-left: -5px; 
 
    margin-right: -5px; 
 
    margin-top: 10px; 
 
} 
 
li{ 
 
    display: flex; 
 
    flex-basis: 33.3333%; 
 
    flex-direction: column; 
 
    flex-grow: 0; 
 
    flex-shrink: 0; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    position: relative; 
 
    max-width: 33.3333%; 
 
    margin-bottom: 10px; 
 
} 
 
.card-image{ 
 
    border-color: rgba(0, 0, 0, 0.15); 
 
    border-style: solid; 
 
    border-width: 1px 1px 0; 
 
    cursor: pointer; 
 
    display: flex; 
 
    flex-direction: column; 
 
    position: relative; 
 
} 
 
.card-image img{ 
 
    display: block; 
 
    height: auto; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    max-width: 100%; 
 
} 
 
.card-image .image-overlay{ 
 
    align-items: center; 
 
    background-color: green; 
 
    color: white; 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
    justify-content: center; 
 
    left: 0; 
 
    line-height: 1.2; 
 
    opacity: 0; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 0; 
 
    transition: opacity 0.3s ease-in-out 0s, visibility 0.3s ease-in-out 0s; 
 
    visibility: hidden; 
 
    width: 100%; 
 
} 
 
.card-image .image-overlay h1{ 
 
    font-size: 36px; 
 
    margin-bottom: 10px; 
 
    margin-top: 0; 
 
} 
 
.card-image .image-overlay p{ 
 
    font-size: 13px; 
 
    margin: 0; 
 
} 
 
.image-content{ 
 
    padding: 15px; 
 
    border-color: rgba(0, 0, 0, 0.15); 
 
    border-style: solid; 
 
    border-width: 0 1px 1px; 
 
    line-height: 1.2; 
 
    color: #121212; 
 
} 
 
.image-content h1{ 
 
    font-size: 36px; 
 
    margin-bottom: 20px; 
 
    margin-top: 0; 
 
} 
 
.image-content p{ 
 
    font-size: 13px; 
 
    margin: 0; 
 
} 
 
li:hover .card-image .image-overlay{ 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<div class="container"> 
 
    <ul> 
 
    <li> 
 
     <div class="card-image"> 
 
     <img src="http://placehold.it/350x350" alt="Card Image" /> 
 
     <div class="image-overlay"> 
 
      <h1>Card Image</h1> 
 
      <p>Good Image</p> 
 
     </div> 
 
     </div> 
 
     <div class="image-content"> 
 
     <h1>This is card content</h1> 
 
     <p>This is description</p> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="card-image"> 
 
     <img src="http://placehold.it/350x350" alt="Card Image" /> 
 
     <div class="image-overlay"> 
 
      <h1>Card Image</h1> 
 
      <p>Good Image</p> 
 
     </div> 
 
     </div> 
 
     <div class="image-content"> 
 
     <h1>This is card content</h1> 
 
     <p>This is description</p> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="card-image"> 
 
     <img src="http://placehold.it/350x350" alt="Card Image" /> 
 
     <div class="image-overlay"> 
 
      <h1>Card Image</h1> 
 
      <p>Good Image</p> 
 
     </div> 
 
     </div> 
 
     <div class="image-content"> 
 
     <h1>This is card content</h1> 
 
     <p>This is description</p> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

희망이 도움이!