CSS 스타일 시트를 이용한 마우스 오버시 테두리 만들기
페이지 정보
작성자
오원장
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 4,385회
작성일 13-12-23 14:41
본문
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>제목 없음</title>
<meta name="generator" content="Namo WebEditor v5.0">
<style>
.mask {
position:relative;
height:180px;
width:240px;
-webkit-box-shadow:0 0 1px #000;
border:2px solid #f6f6f6;
overflow:hidden;
float:left;
margin:15px;
}
.mask img {
position:absolute;
height:300px;
width:400px;
-webkit-transform: rotate(15deg);
-moz-transform:rotate(15deg);
-o-transform:rotate(15deg);
-ms-transform:rotate(15deg);
transform:rotate(15deg);
top:50%;
left:50%;
margin-top:-150px; /* half the height */
margin-left:-200px; /*half the width */
}
.mask:hover {border-color:#ffcc99;}
</style>
</head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>제목 없음</title>
<meta name="generator" content="Namo WebEditor v5.0">
<style>
.mask {
position:relative;
height:180px;
width:240px;
-webkit-box-shadow:0 0 1px #000;
border:2px solid #f6f6f6;
overflow:hidden;
float:left;
margin:15px;
}
.mask img {
position:absolute;
height:300px;
width:400px;
-webkit-transform: rotate(15deg);
-moz-transform:rotate(15deg);
-o-transform:rotate(15deg);
-ms-transform:rotate(15deg);
transform:rotate(15deg);
top:50%;
left:50%;
margin-top:-150px; /* half the height */
margin-left:-200px; /*half the width */
}
.mask:hover {border-color:#ffcc99;}
</style>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<a href="#" class="mask"><img src="0002[1].png" width="274" height="339" border="0"></a>
<a href="#" class="mask"><img src="00003[1].jpg" width="396" height="264" border="0"></a>
<a href="#" class="mask"><img src="0002[1].png" width="274" height="339" border="0"></a>
<a href="#" class="mask"><img src="00003[1].jpg" width="396" height="264" border="0"></a>
</body>
</html>
</html>
댓글목록
등록된 댓글이 없습니다.