[기타] '호후형'님이 문의하신 스크립트입니다.

인벤 스크립트에 관심을 가져주셔서 감사합니다.

문의하신 내용은 생각보다 내용이 많이 들어가 있는 관계로 설명과 함께 전달 드리겠습니다.

1. 이미지는 배경으로 삽입되어 있기 때문에, 가로(width)와 세로(height)값을 수동으로 지정해 주어야 합니다.

2. 텍스트를 중앙에 위치시키기 위해 display:table-cell;을 사용하고 있어서, 내부의 div 상자(줌인 레이어) 역시 이미지 사이즈에 맞춰 가로(width)와 세로(height)값을 수동으로 지정해 주어야 합니다.

3. 줌인 효과를 주기 위해서 transform:scale(xx)를 사용하였습니다. 마우스 오버시 확대되는 정도를 조정하기 위해서는 data-inven-over 뒤에 있는 'transform':'scale(2.0)' 의 숫자 값을 수정해 주세요.

4. 줌인 레이어는 텍스트가 잘 보이게 하려고 마우스를 올리면 불투명하게 조정됩니다. data-inven-over-css에 'background-color':'rgba(0,0,0,0.6)'의 가장 끝에 0.6이 투명도(알파값)을 의미합니다. 1은 완전 불투명, 0은 완전 투명입니다.

5. 배경 div 상자는 display:inline-block으로 되어 있어서, 중앙 정렬을 하고 싶은 경우는 내용 전체를 <center></center>로 감싸 주시면 됩니다.


■ 샘플 소스 : HTML을 누른 상태에서 붙여넣어 주세요.

---

<!-- 배경 : width와 height의 값을 이미지에 맞춰 수정해 줄 것.-->
<div style="background:url(이미지 주소)no-repeat 0 0/100%;width:400px;height:320px;border-radius:4px;overflow:hidden;">

<!-- 줌인 레이어-->
<div style="width:400px;height:360px;display:table-cell;vertical-align:middle;text-align:center;color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);transition:0.2s;transform:scale(1);font-family:sans-serif;" data-inven-over-css="{'_SELF_':{'color':'rgba(255,255,255,1)','background-color':'rgba(0,0,0,0.6)','transform':'scale(2.0)'}}" data-inven-out-css="{'_SELF_':{'color':'rgba(255,255,255,0)','background-color':'rgba(0,0,0,0)','transform':'scale(1)'}}">

오버랩 될 텍스트

</div></div>