[웹개발4] hover 효과

[웹개발4] hover 효과 | Ecency

안녕하세요. @u robotics입니다.
오늘은 뭔가 엄청난 자신감이 솟아나서
CSS를 해봤습니다.

CSS를 저는 잘 모르는데요.
그냥 한 번 해봤습니다. ㅋㅋㅋ

그 중에서 hover가 마음에 들어서요.
오늘은 그 소스를 좀 소개해드릴려고 합니다.

hover 소스.jpg

호버 소스는 이렇게 되는데요.
역시, html 파일로 만들어주시면 됩니다.

호버는
가만 있을 때는, 그림이 좀 희미한데
마우스를 올리면,
그림이 선명해지는 겁니다.

그림으로 보시면 이렇게 됩니다.

아무 그림이나 이름 맞춰서 해주시면 됩니다.
보통 바탕화면에다가 저장하면
경로가 C:\Users\GS63VR\Desktop\1.jpg 이렇게 되는데요.
(GS63VR 요거는 제 pc이름이라서 이렇게 뜹니다.
여러분 경로에는 여러분 pc 이름이 뜨겠죠.)

img src 뒤에 써주시면 됩니다.
img src="C:\Users\GS63VR\Desktop\1.jpg"
img => image 이미지 파일
src = source 소스 파일.
이미지의 출처는 여기입니다. 하고 알려주는 겁니다.

그 다음에 호버가 궁금하실 것 같은데요.
hover 소스 요소분석.jpg

동그라미를 쳐둔 곳이

평소에는 img 상태로 있습니다.
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
opacity 는 투명도 이구요.
0.0에서 1까지 있습니다.
1이 제일 밝은 거에요.

원래는 0.5 밝기 였다가
hover를 하게 되면

img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}

밝기 opacity가 1이 됩니다.
완전 밝아지는 거죠. ㅋㅋㅋ

이거 되게 쓸만한 데가 많을 것 같아요.
실제 웹페이지를 만들면 재밌게 활용가능하실 것 같아서 올려봅니다.

그러면 즐거운 개발 되시길 바랍니다.

감사합니다.