Notice
Recent Posts
Recent Comments
Tags
- django 엑셀불러오기
- XSS PHP
- SSD 복사
- ViewData
- 파일업로드 체크
- 말줄임표시
- 바코드 스캔하기
- jquery 바코드생성
- 타임피커
- XSS방어
- ASP.Net Core 404
- asp.net dropdownlist
- TempData
- 404에러페이지
- javascript 바코드 생성
- ViewBag
- 하드 마이그레이션
- javascript 바코드스캔
- jquery 바코드
- 하드 윈도우 복사
- php 캐쉬제거
- 바코드 생성하기
- asp.net core Select
- asp.net Select
- Mac Oracle
- 강제이동
- javascript 유효성체크
- 파일업로드 유효성체크
- javascript redirection
- 맥 오라클설치
웹개발자의 기지개
사진 롤오버 선택시 약간 커지는 애니메이션 효과주기 본문
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.zoom {
padding: 50px;
background-color: blue;
transition: transform .2s;
width: 100px;
height: 100px;
margin: 0 auto;
}
.zoom:hover {
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari 3-8 */
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="zoom"></div>
</body>
</html>
<style>
.zoom11 {
transition: transform .2s;
margin: 0 auto;
}
.zoom11:hover {
-ms-transform: scale(1.04); /* IE 9 */
-webkit-transform: scale(1.04); /* Safari 3-8 */
transform: scale(1.04);
}
<img src="이미지경로" class="zoom11" />'웹퍼블리싱 > CSS' 카테고리의 다른 글
| CSS 그라데이션 배경색 넣기 (0) | 2020.01.31 |
|---|---|
| Font Awesome (폰트오썸) 무료 아이콘 이용하기 (0) | 2019.12.20 |
| display 의 table-row 속성 (0) | 2019.05.27 |
| position 의 relative , absolute 연습 (0) | 2019.05.13 |
| 해상도 크기에 관계없이 배경이미지 깔기 (0) | 2019.02.13 |
'웹퍼블리싱/CSS' Related Articles
more
Comments