[기타] 예시 코드입니다.

<div style="width:430px; height:410px;">

<a href="http://www.inven.co.kr/webzine/" target="_BLANK">

<div style="display:inline-block; float:left; width:280px; height:405px; margin-right:2px; border:1px solid black; border-radius:10px; transition:0.3s; 

background: white url('https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16063864967.jpg') center / 100% 100% no-repeat;">

<div style="width:100%; height:100%; border:0px; border-radius:10px; transition:0.3s; opacity:0; 

background: white url('https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16095224820.jpg') center / 140% 140% no-repeat;"

data-inven-over-css="{'_SELF_':{'opacity':'1'}}"

data-inven-out-css="{'_SELF_':{'opacity':'0'}}">

</div>

</div>

</a>

<a href="http://imart.inven.co.kr/attendance/" target="_BLANK">

<div style="display:inline-block; width:140px; height:140px; margin:1px; border:1px solid black; border-radius:10px; transition:0.3s; 

background: white url('https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg') center / 100% 100% no-repeat;">

<div style="width:100%; height:100%; border:0px; border-radius:10px; transition:0.3s; opacity:0; 

background: white url('https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16017134312.png') center / 120% 100% no-repeat;"

data-inven-over-css="{'_SELF_':{'opacity':'1'}}"

data-inven-out-css="{'_SELF_':{'opacity':'0'}}">

</div>

</div>

</a>

<a href="http://imart.inven.co.kr/" target="_BLANK">

<div style="display:inline-block; width:140px; height:260px; margin:1px; border:1px solid black; border-radius:10px; transition:0.3s; 

background: white url('https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16055784198.jpg') center / 100% 90% no-repeat;">

<div style="width:100%; height:100%; border:0px; border-radius:10px; transition:0.3s; opacity:0; 

background: white url('https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16082516927.png') center / 160% 100% no-repeat;"

data-inven-over-css="{'_SELF_':{'opacity':'1'}}"

data-inven-out-css="{'_SELF_':{'opacity':'0'}}">

</div>

</div>

</a>

</div>

========================================================

 

========================================================

그 코드를 이용하는게 맞습니다.

한 블록의 소스를 분석해보자면

========================================================

<a href="http://www.inven.co.kr/webzine/" target="_BLANK">

<div style="display:inline-block; float:left; width:280px; height:405px; margin-right:2px; border:1px solid black; border-radius:10px; transition:0.3s; 

background: white url('https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16063864967.jpg') center / 100% 100% no-repeat;">

<div style="width:100%; height:100%; border:0px; border-radius:10px; transition:0.3s; opacity:0; 

background: white url('https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16095224820.jpg') center / 140% 140% no-repeat;"

data-inven-over-css="{'_SELF_':{'opacity':'1'}}"

data-inven-out-css="{'_SELF_':{'opacity':'0'}}">

</div>

</div>

</a>

========================================================

href = " "                         -> href=" 주소 "  :  하이퍼링크 연결 주소

target="_BLANK"                -> 새 창으로 링크 열기

display: inline-block;        -> 인라인( 가로로 이어지는 )  블록( 네모칸 형성 ) 스타일

float:left                       -> 다른 요소에 구애받지 않고 왼쪽에 밀착 

                                      (left와 right가 가능하고, 현재 소스의 경우 사용하지 않아도 무방합니다.)

width:280px;                 -> 너비

height:405px;                -> 높이

                      ** 파란 div에서 너비와 높이를 100%로 설정한 것은, 

                         상위 태그인 갈색 div의 너비와 높이에 딱 맞추기 위함입니다.

                         그냥 갈색 div처럼 width:280px; height:405px; 이렇게 써주셔도 결국 똑같습니다.

margin-right:2px;               -> 오른쪽 여백

border:1px solid black;         -> 테두리 굵기:1px, 테두리 스타일:solid(기본), 테두리 색상:black

                                       (0px 혹은 none일 경우 테두리 없음)

border-radius:10px;            -> 꼭지점 곡률(커질수록 더 둥글게 됩니다)

transition:0.3s;                  -> 전환 효과 지연시간 ( 이미지가 느리게 바뀌게 하는 효과 )

background: white url('')       -> url(' 이미지 주소 ')  :  해당 이미지 주소의 이미지로 배경 설정 

                                       white : 배경 이미지가 채우지 못하는, 남은 부분 배경 색상은 하얀색

center / 100% 100% no-repeat;  

-> center : 배경 이미지를 가운데 정렬

-> 100% 100% : div의 사이즈 기준으로 너비 100%, 높이 100% 설정

                   (200px의 100%는 200px, 50%는 100px 등등 상대적인 비율 값을 가집니다.

                    % 단위 대신 다른 단위들을 사용할 수도 있습니다(px, em 등 길이 단위).)

-> no-repeat : 이미지 반복하지 않음( 설정하지 않으면 이미지가 바둑판식으로 반복 배열됨 )

data-inven-over-css        -> 컨트롤에 마우스를 올릴 경우

data-inven-out-css         -> 마우스 over 상태에서 컨트롤 바깥으로 나갈 경우

_SELF_                        -> css의 적용 대상을 css가 속한 자신의 태그로 설정

opacity                        -> 투명도 ( 0 : 투명 ~ 1 : 불투명 )

========================================================

이런 요소들로 이루어져 있고,

한 블록의 구성은 크게 보면

========================================================

<a>

<div>

<div>

</div>

</div>

<a>

========================================================

이런 구성으로 되어있습니다.

블록 div 전체를 <a>~</a> 태그가 감싸서 하이퍼링크를 형성하고

갈색의 div 태그가 파란색의 div 태그를 포함하는 구조이며,

따라서 파란색의 div 블록은 갈색의 div 블록 위에 겹쳐 보이게 됩니다.

처음 속성으로 파란색의 div에 opacity(투명도)를 0으로 설정함으로써 보이지 않게 숨겨놓다가,

마우스 오버 css를 통해 opacity를 1로 변경하여 파란색이 갈색을 가리며 등장하는 효과를 줍니다.

그리고 마우스 아웃 css를 통해 마우스가 벗어나게 되면 다시 opacity를 0으로 변경하여 안보이게 됩니다.