어떻게하면 이미지와 텍스트를 그룹화하여 s이 될 수 있습니까?

아래 (jsfiddle)는 많은 회색조 이미지와 그 제목을 보여주는 CSS + HTML 코드입니다. 기능상 이미지 위에 마우스를 가져 가면 이미지의 실제 색상이 복원되고 제목이 부제 및 세부 정보로 바뀝니다. CSS를 통해 이것은 :hover을 사용하여 얻을 수 있습니다.어떻게하면 이미지와 텍스트를 그룹화하여 s이 될 수 있습니까?

효과가 잘 작동하고 문제/글리치가 표시되지 않는 것처럼 보이지만 커서가 제목 위로 이동하면 이미지는 회색조로 돌아가고 제목은 자막 및 세부 정보로 바뀝니다. 궁금한데 1) 이미지와 텍스트를 모두 하나의 요소로 만들 수있는 방법, 2) 텍스트에 페이드 인 효과를 추가하려면 어떻게해야합니까?, 마지막으로 3) 이미지 위에 마우스를 올리면 이미지가 회색으로 표시되지 않고 회색으로 유지 될 수 있습니까??

여기에 제가 설정 한 jsfiddle입니다. 설명을 위해 다른 참고 자료/자료/수정 사항이 있는지 알려 주시기 바랍니다. 미리 감사드립니다!

- 행복한 추수 감사절! StackExchange의 놀라운 커뮤니티에 대해 감사드립니다. 지난 몇 개월 동안 저에게 많은 도움을 주신 모든 분들께 감사드립니다. 나는 언젠가 내가 다른 사람들을 도와 주어 줄 수있는 시점까지 코딩에 능숙 해 지길 바랍니다. 건배!

CSS

section.image ul { 
    overflow: hidden; 
    clear: both; 
    padding: 0; 
    margin: 5% 0 0 0; 
    width: 100%; 
} 
section.image li { 
    display: block; 
    list-style-type: none; 
    list-style-image: none; 
    text-align: center; 
    margin-bottom: 100px; 
    position: relative; 
} 
section.image li img { 
    filter: grayscale(1); 
    -webkit-filter: grayscale(1) brightness(0.9); 
    -moz-filter: grayscale(1) brightness(0.9); 
    -o-filter: grayscale(1) brightness(0.9); 
    -ms-filter: grayscale(1) brightness(0.9); 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    -ms-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    cursor: pointer; 
    max-width: 100%; 
    height: auto; 
} 
section.image li img:hover { 
    filter: grayscale(0.1) brightness(1); 
    -webkit-filter: grayscale(0.1) brightness(1); 
    -moz-filter: grayscale(0.1) brightness(1); 
    -o-filter: grayscale(0.1) brightness(1); 
    -ms-filter: grayscale(0.1) brightness(1); 
} 
section.image li span.caption { 
    display: none; 
    position: absolute; 
    text-align: center; 
    margin-top: 18px; 
    width: 100%; 
    height: auto; 
} 
section.image li:hover span.caption { 
    display: block; 
} 
section.image li span.caption.label { 
    display: block; 
    font-size: 23px; 
    margin-top: 23px; 
    font-family:'Phenotype S', times; 
} 
section.image li:hover span.caption.label { 
    display: none; 
}

HTML

<section class="image"> 
    <ul> 
     <li> 
      <img width="80%" height="100%" src="http://asset2.itsnicethat.com/system/files/022013/5114e1305c3e3c262a000631/img_col_main/3.-Nov.-2008.jpg?1360323002" class="attachment-full" alt="selected_image" title="selected_image" /> 
      <span class="caption label">Title</span> 
      <span class="caption">Subtext<br/>Detail</span> 
     </li> 
     <li> 
      <img width="30%" height="100%" src="http://asset2.itsnicethat.com/system/files/022013/5114e1375c3e3c262a000632/img_col_main/6.-Nov.-08.jpg?1360323004" class="attachment-full" alt="selected_image" title="selected_image" /> 
      <span class="caption label">Title</span> 
      <span class="caption">Subtext<br/>Detail</span> 
     </li> 
     <li> 
      <img width="70%" height="100%" src="http://asset2.itsnicethat.com/system/files/022013/5114e13a5c3e3c22a3000bdf/img_col_main/10.-Nov.-08-(reverse).jpg?1360323005" class="attachment-full" alt="selected_image" title="selected_image" /> 
      <span class="caption label">Title</span> 
      <span class="caption">Subtext<br/>Detail</span> 
     </li> 
     <li> 
      <img width="90%" height="100%" src="http://asset1.itsnicethat.com/system/files/022013/5114e13d5c3e3c22a3000bfc/img_col_main/10.-Nov.-08.jpg?1360323006" class="attachment-full" alt="selected_image" title="selected_image" /> 
      <span class="caption label">Title</span> 
      <span class="caption">Subtext<br/>Detail</span> 
     </li> 
    </ul> 
</section>

출처

2014-11-28 kenhimself

은 (는 박스 모델이 어떻게 작동하는지에 대해 생각한다면, 이것은 이해한다) 패딩에 여백을 변경

. 나는 또한 li image:hoverli:hover img에

http://jsfiddle.net/j1r7es4j/2/

body { 
    width: 40%; 
    height: 100%; 
    margin: 0 auto; 
    font: 100%; 
    color: #222222; 
} 

section.image ul { 
    overflow: hidden; 
    clear: both; 
    padding: 0; 
    margin: 5% 0 0 0; 
    width: 100%; 
} 
section.image li { 
    display: block; 
    list-style-type: none; 
    list-style-image: none; 
    text-align: center; 
    padding-bottom: 100px; 
    position: relative; 
} 
section.image li img { 
    filter: grayscale(1); 
    -webkit-filter: grayscale(1) brightness(0.9); 
    -moz-filter: grayscale(1) brightness(0.9); 
    -o-filter: grayscale(1) brightness(0.9); 
    -ms-filter: grayscale(1) brightness(0.9); 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    -ms-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    cursor: pointer; 
    max-width: 100%; 
    height: auto; 
} 
section.image li:hover img { 
    filter: grayscale(0.1) brightness(1); 
    -webkit-filter: grayscale(0.1) brightness(1); 
    -moz-filter: grayscale(0.1) brightness(1); 
    -o-filter: grayscale(0.1) brightness(1); 
    -ms-filter: grayscale(0.1) brightness(1); 
} 
section.image li span.caption { 
    display: none; 
    position: absolute; 
    text-align: center; 
    padding-top: 18px; 
    width: 100%; 
    height: auto; 
} 
section.image li:hover span.caption { 
    display: block; 
} 
section.image li span.caption.label { 
    display: block; 
    font-size: 23px; 
    padding-top: 23px; 
    font-family:'Phenotype S', times; 
} 
section.image li:hover span.caption.label { 
    display: none; 
}

변경

출처

2014-11-28 02:19:49 superUntitled

어떻게하면 이미지와 텍스트를 그룹화하여 s이 될 수 있습니까?

답변

관련 문제