728x90
반응형
코드부터 바로 보여드릴께요 !!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>image hover</title>
<style>
img:hover {
width:400px;
transform:scale(1.5);
transition: transform.5s;
}
</style>
</head>
<body>
<img src="https://pbs.twimg.com/media/D0AEcLJVYAErhXl?format=jpg&name=medium" width=400px; alt="아이유사진">
</body>
</html>
img:hover {
width:400px; /* 사진크기 조절 */
transform:scale(2, 1.5); /* 가로2배 새로 1.5배 로 커짐 */
transition: transform.5s; /* 커지는 시간 */
}
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 경고창(alert) 확인 / 취소 띄우기! (0) | 2020.10.26 |
|---|---|
| [HTML & CSS] 레이아웃(layout) 기본틀 (0) | 2020.10.23 |
| [HTML & CSS] 리스트(list) 표기법 ! (0) | 2020.10.22 |
| [HTML & CSS] 기본적인 표(table) 만들기 (0) | 2020.10.21 |
| [HTML & CSS] 버튼에 링크달기(button link) (0) | 2020.10.13 |
댓글