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

마우스를 올렸을 때, 이미지가 투명해 지면서 문자가 보이는 스크립트를 문의해 주셨는데요.
아래의 소스를 참고해 주세요.

입맛에 맞게 수정하실 수 있게, 짧게 설명을 덧붙입니다.


1. 표시되는 내용 수정
<span></span> 사이에 들어가 있는 내용을 수정해 주시면 됩니다.
마찬가지로 앞의 span에 style을 수정해 주시면 글자의 크기/효과(두껍게) 등을 변경하실 수도 있습니다.


2. 마우스를 올렸을 때의 색상 변화
data-inven-over-css 뒤에 붙는 스타일을 수정해 주시면 됩니다.
rgba는 각각 빨/녹/파/투명도의 값을 나타내고 있으며,
색상은 0~255, 투명도는 0(투명)~1(불투명)의 값을 조절하셔서 원하시는 색상을 맞춰 주시면 됩니다.

각각의 값은 다음을 의미합니다.

background-color : 배경색상
color : 글자 색상


혹시 수정에 어려움이 있으시거나, 이외에도 궁금하신 내용은 언제든지 글 남겨주세요.

감사합니다.



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

<div style="width:438px; height:237px;background:url(http://upload2.inven.co.kr/upload/2017/01/02/bbs/i15426163905.jpg) no-repeat 0 0 /100%;color:rgba(255,255,255,0);">
<a href="http://www.inven.co.kr/board/powerbbs.php?come_idx=4957&my=post&l=315" target="_blank" style="text-decoration:none;color:rgba(255,255,255,0);">
<div style="width:438px; height:237px;transition:0.4s;display:table-cell;vertical-align:middle;" data-inven-over-css="{'_SELF_':{'background-color':'rgba(0,0,0,0.8)','color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}">
<div style="padding:1em;text-align:center;">
<span style="font-size:14px; font-weight:bold;letter-spacing:1px;font-face:arial;">
디아블로 3<br>
새로운 직업: 변절자<br><br><br>
자세히 알아보기!</span>
</div>
</div></a></div>