Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

스타일 시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용

 

환경: Eclipse Mars, CSS3

 

이번 예제는 이미지에 마우스오브 했을 때 선택되었다는 느낌을 주기 위해 이미지 안쪽에 빨간색 테두리를 만들어 보겠습니다.

 

먼저 CSS 전체 소스에서 첫번째 부분입니다. 마우스가 이미지 위에 없을 때 적용하는 부분입니다. overflow : hidden 인 이유는 이미지 안쪽을 border 크기만큼 가릴 때 안 보이는 부분 제외하고 보여 주기 위해서 입니다. visible 을 하게 되면 테두리 생성이 안됩니다.

 

a.inner, a.inner img {
	float: left;
	overflow: hidden;
}

 

두번째 부분인 a.inner : hover 는 이미지에 마우스를 올렸을 때 둘러싸고 있는 테두리를 크기만큼 만들고 색깔을 칠하게 됩니다.


a.inner:hover {
	border: 20px solid #f00;
}

 

 

세 번째 소스에서 margin: -20px boder 크기만큼 이미지를 바깥쪽으로 밀어내는 역할을 합니다. a.inner : hover a.inner : hover img 가 합쳐 져서 이미지가 줄거나 늘어나지 않고 안쪽에 테두리가 쳐진 것처럼 보이게 만드는 것입니다.


a.inner:hover img {
	margin: -20px;
}

 

다음은 전체 소스 입니다.

<html>
<head>
<meta charset="EUC-KR">
<title>마우스오브 테두리 주기</title>
<style type="text/css" media="screen">
	a.inner, a.inner img {
		float: left;
		overflow: hidden;
	}
	a.inner:hover {
		border: 20px solid #f00;
	}
	a.inner:hover img {
		margin: -20px;
	}
</style>
</head>
<body>
	<h1>마우스오브 테두리 주기</h1>
	<a href="#" class="inner"> 
		<img src="https://t1.daumcdn.net/cfile/tistory/2101443B5587DDB602" 
		width="300" height="300" alt=""	border="0" />
	</a>
</body>
</html>

 

반응형
Posted by 녹두장군1
,