일련의 이미지가있는 이미지 위에 마우스가 표시됩니다.

Question

그래서 이미지가 하나 뿐인 경우 CSS를 사용하여 텍스트 위에 마우스를 올려 놓는 방법을 알고 있습니다. 그러나 ... 동일한 치수가 같은 세 개의 이미지가있는 페이지를 만들고 싶습니다.

x | x | x

한 이미지 위로 마우스를 가져 가면 다른 두 이미지가 사라지는 동안 해당 이미지에 대한 텍스트가 표시됩니다. 이 작업을 수행하려면 javascript/jQuery가 필요합니까? 아니면 CSS만으로 가능합니까?

또한이 작업은 프로젝트에 다소 복잡하고 필요하지 않지만 텍스트가 나타나는 동안 마우스를 올려 놓은 이미지를 왼쪽 (두 번째 및 세 번째 이미지)으로 옮길 수 있습니까? 그리고/또는 텍스트가 화면 뒤에서 펼쳐지는 것처럼 보이도록 전환 기능을 사용할 수 있습니까?

마지막 부분은 완전히 선택 사항이며 심지어 수행 할 수도 없을 수도 있습니다. 실제로는 다른 이미지가 사라지는 동안 개별 div를 가져 오는 방법을 알아 내려고 노력하고 있습니다. 감사!

Answer 1

예, CSS만으로 가능합니다.

이 방법에는 여러 가지가 있지만 이미지 위에 표시 할 이미지와 캡션이 포함 된 각 이미지 (부모의 요소)에 부모 요소를 사용하는 것이 일반적입니다. 그런 다음 CSS를 사용하여 캡션 오버레이를 만들거나 마우스를 가져갈 때 위치로 전환 할 수 있습니다.

빠른 예는 다음과 같습니다 (demo code 참조).

<div class="image-wrapper"> 
    <img src="http://placehold.it/180x120/eeeeee"> 
    <div class="caption"> 
     Your caption text here. 
    </div> 
</div> 
<div class="image-wrapper"> 
    <img src="http://placehold.it/180x120/eeeeee"> 
    <div class="caption"> 
     Your caption text here. 
    </div> 
</div> 
<div class="image-wrapper"> 
    <img src="http://placehold.it/180x120/eeeeee"> 
    <div class="caption"> 
     Your caption text here. 
    </div> 
</div> 

CSS

.image-wrapper { 
    position: relative; 
    width: 180px; 
    float: left; 
    margin-right: 10px; 
} 
.image-wrapper:last-child { 
    margin-right: 0; 
} 
.image-wrapper .caption { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    display: none; 
    background: rgba(0,0,0, 0.6); 
    color: #fff; 
    padding: 0.5rem; 
} 
.image-wrapper:hover .caption { 
    display: block; 
}