- 실패 내용과 해결방법
- 실패1: 마우스 커서를 가져다 댈 때 해당 이미지가 확대되며 가장 위로 올라오도록 sclae과 z-idex 기능을 사용하였다.
하지만 목차 중 INTEREST에 있는 이미지들은 확대되어도 밑에 있는 텍스트가 비쳐보인다.
- 시도한 방법: comment부분에 z-idex: 0 을 줘봤으나 현상 해결 안됨
- 해결한 방법: 혹시나 싶어 comment 텍스트에 설정한 투명도 기능(opacity: 0.8)을 지워보았더니 현상 해결됨(hover 이미지가 텍스트 위로 올라옴). 그러나 그림에 투명도를 준 게 아니고 텍스트에 준 건데 왜 글씨가 그림에 비쳐보이는지는 모름;
- 개선하고 싶은 점
img:hover {
transform: scale(1.7);
-webkit-transform: scale(1.7); /* 크롬 */
-moz-transform: scale(1.7); /* 파이어폭스 */
-o-transform: scale(1.7); /* 오페라 */
z-index: 1;
}- 위 코드에서 이미지가 확대됨과 동시에 화면의 가운데에 위치하도록 하고 싶다.....