[hover효과] draw line above box

박스영역에 선 그리기

*프리밴더를 배제하고 작성하였으니 jsfiddle가서 복붙해서 쓰세여

1. 마우스 호버시 해당 이미지 zoom In효과

2. 이미지 레이어위에 다른 색레이어 겹침효과

3. 이미지 테두리에 띠가 둘러지는 효과

디자인 참고) cj E&M 홈페이지

           호버시

1) html 구조

 

  - module(부모)값 안에 md-cont로 한번 더 감싼뒤 a를 감싸준다.(이중포장)

2) css

2-1) hover시 zoom In

.module {  transition: transform 1s ease 0s; }
.module:hover .md-cont > a,  .module:hover .md-cont > img {
    animation-delay: 0!important;
    transform: scale(1.1, 1.1);
 }
 
 
 
 

transform : scale( 값, 값 );

2-2 ) hover시 색 레이어 

a에 가상클래스 :after를 생성하여 background를 생성, opacity:0 으로 정의 후 hover시 opacity : 0.5 

.module { 
    overflow:hidden;
    position:relative; 
    z-index:0;
}
.module .md-cont>a:after  {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background:#000;
    opacity: 0; 
    transition: all .3s linear;
}
.module:hover .md-cont>a:after {
    opacity: .5
}
 
 

2-3) 라인 4개 -> 2개 그리기

*선이 그려지는 방향은 좌=>우, 상=>하, 우=>좌, 하=>상

 - module의 :before, :after  - height / 상하,하상의 선이 그려지는 div

 - md-cont의 :before, :after - width / 좌우, 우좌의 선이 그려지는 div

 - width:4px, height:4px => 선의 굵기를 width와 height로 설정해준다.

 

** 방향을 정할때 position : absolute를 활용하여 left:0으로 위치하면 좌->우 방향으로 width:100%가 채워지고

right: 0 에 위치하면 우 - > 좌 방향으로 width 100%가 채워진다!(top, bottom 동일)

- 방향을 정할때 

1) top:0, left:0     →

2) top:0, right:0   ↓

3) bottom:0, right:0   ←

4) bottom:0, left:0   ↑

- 선의 방향에 따른 div 구분

상,하단의 가로선 - .module의 before, after

좌,우의 세로선 - .md-cont의 before, after

.module {overflow:hidden;position:relative;}
.module .md-cont{overflow:hidden;}
/* 기본값 */
.module .md-cont:after,
.module .md-cont:before,
.module:after,
.module:before {
    content: '';
    position: absolute;
    z-index: 1;
    display: inline-block;
    box-sizing: box-sizing;
    width: 4px;
    height: 4px;
    background: #74c4f1; //선색  
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);  
    transition-duration: .25s;   
    transition-delay: 0s;
    opacity:0;
}
/* 위 아래 가로선의 가로값 */
.module:after, .module:before {
    width:0;
    height:4px
}
.module:before { /* left 방향으로 기본값이 정해져있기때문에 width100%가 좌->오 방향으로 그려짐 */
    top:0;
    left:0;
    background: linear-gradient(left, #74c4f1 0%, #b597b0 100%);
    transition-delay: 0s; 
}
.module:after { /* right 방향으로 기본값이 정해져있기때문에 width100%가 오->좌 방향으로 그려짐 */
    bottom: 0;
    right: 0;
    background: linear-gradient(left, #b299b2 0%, #f36c71 100%);
    transition-delay: 0s;
}
/* 좌, 우의 세로선의 세로값 */
.module .md-cont:after,
.module .md-cont:before {
    width: 4px;
    height: 0;
}
.module .md-cont:before {
    right: 0;
    top: 0;
    background: linear-gradient(top, #b597b0 0%, #f36c71 100%);
    transition-delay: 0s; 
}
.module .md-cont:after {
    left: 0;
    bottom: 0;
    background: linear-gradient(top, #74c4f1 0%, #b299b2 100%);
    transition-delay: 0s;
}

t

rainsition-timing-function을 조절하고싶다면 http://cubic-bezier.com/ << 에서 조정한 값을 넣거나 아예 빼고 transition의 ease, linear, ease-in, ease-out, ease-in-out을 작성한다.

호버시

.module:hover .md-cont:after,
.module:hover .md-cont:before,
.module:hover:after,
.module:hover:before {
    opacity: 1
}
/* 위, 아래 가로값 */
.module:hover:after,
.module:hover:before {
    width: 100%
}
/* 왼쪽, 오른쪽 세로값 */
.module:hover .md-cont:after,
.module:hover .md-cont:before {
    height: 100%
}
.module:hover:before { /*  방향 → */
    transition-delay: 0s
}
.module:hover:after { /* 방향 ← */
    transition-delay: .4s
}
.module:hover .md-cont:before { /* 방향 ↓ */
    transition-delay: .2s
}
.module:hover .md-cont:after { /* 방향 ↑ */
    transition-delay: .6s
}
 
 

호버시 

1) opacity를 1로 만들어준다.

2) width값과 height:값을 100%로 만들어준다.

3) 순차적 방향으로 transition-delay를 작성해준다.

예시) 

https://jsfiddle.net/jywoo/ru6vw5x8/18/