Wordpress gallery hover 액션

Question

나는 포트폴리오를 만들고 있는데 갤러리가 단색의 상자로만 구성되기를 원합니다. 또한, 프로젝트의 유형 (예 : 인쇄, 웹 등)을 알리는 아이콘이 맨 위에 표시됩니다. 내가 원하는 것은 박스 중 하나를 가리키면 단색이 그림 같은 프로젝트의 미리보기로 변경됩니다. 마우스를 상자 위로 가져 가면 아이콘이 유지됩니다.

사람이 나를 안내보십시오 수 :이 때문에 내 나쁜 영어를 이해할 수없는 경우

, 내 원하는 작업을 시각화하는 그래픽 (빨간색 사각형 호버 모드에있는)을 만들어?

Answer 1

이것은 더 이상 할 일이 아니지만 CSS3에 약간의 기술이 필요합니다. 또한 Wordpress 플러그인을 사용할 수 있습니다 (예를 들어, Wordpress 플러그인 사이트 내에서 마우스 오버 이미지를 검색해보십시오) 및/또는 비슷한 기능을 포함하는 테마로 시작하여 원하는대로 조정할 수 있습니다.

가의 아이디어를 Wordpress.org에서이 설명을 참조 절대

Z- 인덱스 :

• : 가져
• 위치하지만 결국, 당신은 기본적으로 다음과 같은 CSS로 볼 필요가 시작하는 곳. 여기에 설명 된 : after 태그는 실제로 필요하지 않습니다. 나는 단지 : hover 속성을 사용하여 비슷한 것을 만들었다. 트릭은 모든 것을 담고있는 외부 div를 생성 한 다음 (표시하려는 이미지 포함) z- 인덱스가있는 "position : absolute"CSS를 사용하여 항목을 서로 쌓아 올리는 것입니다. : hover 속성을 사용하여 스택의 "상단"에있는 항목의 불투명도를 기본 불투명도로 변경하여 기본 항목이 상단 레이어를 통해 표시되도록합니다.

  CSS는 다음과 같습니다

  .gallery1 {width: 280px; height: 178px; display: inline-block; float: left; margin: 5px} 
  .gallery1 img {position: absolute; z-index: 1} 
  .gallery1 div {position: absolute; opacity: 1; z-index: 2; height: 178px; width: 280px; text-align:center; vertical-align: middle; line-height: 178px; margin: 0px; padding: 0px; font-family: Arial; font-size: 14pt; background-color: rgb(255, 245, 130)} 
  .gallery1 div:hover {opacity: 0.3} 
  

  HTML의 모습 :

  <div class='gallery1'> 
  <img src='whatever.jpg'> 
  <div>Text or code for icon here</div> 
  </div> 
  

  생각입니다 위치의 사용을 통해 : 절대 IMG가 gallery1 div의 내 위치에 고정되어, 그런 다음 z- 인덱스를 통해 텍스트 또는 아이콘이있는 div보다 낮은 값으로 설정됩니다. 아이콘이있는 div는 절대 위치이며 이미지의 맨 위에 스택되도록 더 높은 z- 인덱스가 지정되며 이미지 크기와 일치하도록 설정된 높이/너비가 고정되어 있습니다. 다음으로 배경색이있는 불투명도 1이 주어 지므로 이미지를 덮거나 숨 깁니다. : 호버 (hover) 스타일을 사용하면이 불투명도가 낮아져서 이미지를 보여줄 수 있습니다.