Eveningstar

참고 _ https://codepen.io/nxworld/pen/ZYNOBZ Html 구조 [ CSS ] 1. Zoom In 기본 a img {transform: scale(1);transition: .3s ease-in-out; } hover시 a:hover img {-webkit-transform: scale(1.3);transform: scale(1.3); } - transform: scale(값) 을 통해 zoom 효과 부여 2. Zoom In 2 기본 a img {width: 350px; //width값을 지정height: auto;transition: .3s ease-in-out; } hover시 a:hover img {width: 450px; } - width값 크기 변경을 통해 zoom 효..

박스영역에 선 그리기*프리밴더를 배제하고 작성하였으니 jsfiddle가서 복붙해서 쓰세여 1. 마우스 호버시 해당 이미지 zoom In효과2. 이미지 레이어위에 다른 색레이어 겹침효과3. 이미지 테두리에 띠가 둘러지는 효과 디자인 참고) cj E&M 홈페이지 호버시 1) html 구조 - module(부모)값 안에 md-cont로 한번 더 감싼뒤 a를 감싸준다.(이중포장) 2) css 2-1) hover시 zoom In 123456789.module { transition: transform 1s ease 0s; }.module:hover .md-cont > a, .module:hover .md-cont > img { animation-delay: 0!important; transform: scale(1..