[문의] 스크립트 꾸미기 도전하고잇는데 도와주세요

Nacx님 이 올려주신 카카오톡디자인을 베이스로 꾸미고잇습니다.

질문 1. 하단 버튼 3개 마우스를 갓다 때면 다시 원래 이미지로 돌아오질않습니다.

질문 2. 링크 클릭시 새창에 띄우는 방법 알고싶습니다.

질문 3. 이미지에 마우스커서 올리면 글씨가 보이게하는것 알고싶습니다. 

<!--전체 테두리, 0px로 해서 지울 수 있다.-->

<div style="width: 450px;border:1px solid black;font-size:15px;'">

<!--상단 이미지 상자-->

<div>

<img src="https://upload2.inven.co.kr/upload/2016/09/18/bbs/i13057495727.jpg" width="100%">

</div>

<!--중앙 원형 그림 - 인장 펼치기-->

<div style="width: 0px; height: 0px; display: inline-block;">

<div style="width: 450px;">

<div style='background: url("https://upload2.inven.co.kr/upload/2016/09/18/bbs/i13506523429.jpg") no-repeat center / 100%; margin: 0px auto; 

border-radius: 80px; top: -90px; width: 146px; height: 146px; overflow: hidden; position: relative;'>

<div style="transition:0.4s; width: 146px; height: 146px; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;" 

data-inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-over-css="{'_SELF_':

{'background-color':'rgba(255,255,255,0.4)','color':'rgba(55,55,55,1)'}}" data-inven-toggle="sealing">

<div style="padding: 1em; text-align: center; font-size: 15px;">

프로필

</div></div></div></div></div>

<div style="Background-color: rgba(215, 190, 135, 8);"><!-- 이미지 아래로 나오는 흰색 공간입니다. 배경색 또는 배경 이미지를 넣을 수 있습니다

.-->

<div style="height: 60px;"></div>

<!--중앙 클릭시 펼쳐질 상자 (숨겨진 상자)-->

<div style="padding: 1em; text-align: center; display: none;transition:0.4s;" data-inven-id="sealing">

World Of Warcraft<br />

League Of Legend<br />

<a href="http://www.op.gg/summoner/userName=Carine%20BloodHoof"><img src="https://upload2.inven.co.kr/upload/2016/09/18/bbs/i12544965358.jpg"></a><br/>

본케 <br/>

<a href="http://www.op.gg/summoner/userName=북한산곰돌이">

<img src="https://upload2.inven.co.kr/upload/2016/09/18/bbs/i12556607803.jpg"></a><br/>

부케<br/>

 <br />

Hearth Stone <br/>

<img src="https://upload2.inven.co.kr/upload/2016/09/18/bbs/i10547706117.jpg"><br/>

<a href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=6545">5월 느조방밀 </a><br/>

<a href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=12029">6월 느조사제 </a><br/>

<a href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=14318">7월 켈투사제 </a><br/>

<a href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=17106">8월 느조사제 </a><br/>

<a href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=22318">9월 템포손님 </a><br/>

OverWatch<br/>

<br /></div>

<!-- 기본 내용 상자 -->

<div style="padding: 1em;text-align: center;">

<span style=" color: black; font-weight: bold;"> 노움 애호가~♡♡♡

</span> </div>

<!-- 하단의 3개 버튼, 지울 수 있습니다.-->

<div style="padding: 1em; text-align: center; ">

<!-- 가입일-->

<div style='background: url("https://upload2.inven.co.kr/upload/2016/09/18/bbs/i13607656547.jpg"); margin: 0px 15px; border-radius: 10px; 

border: 3px solid white; border-image: none; width: 92px; height: 92px; overflow: hidden; display: inline-block;'>

<div style="transition:0.4s; width: 92px; height: 92px; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;" data-

inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-over-css="{'_SELF_':

{'background-color':'red','color':'rgba(255,255,255,1)'}}">

<div style="padding: 0.5em;font">가입일<br>

<span style="font-weight:bold;">D + </span><span data-inven-dday="2011-04-10" style="font-weight:bold;"></span>

<!-- dday 뒤에 "yyyy-mm-dd"의 형태로 가입일 입력-->

</div></div></div>

<!-- 마무리 일격 : 닉네임 입력-->

<div style='background: url("https://upload2.inven.co.kr/upload/2016/09/18/bbs/i10317886042.jpg"); margin: 0px 15px; border-radius: 10px; 

border: 3px solid white; border-image: none; width: 92px; height: 92px; overflow: hidden; display: inline-block;'>

<div style="transition:0.4s; width: 92px; height: 92px; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;" data-

inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-over-css="{'_SELF_':

{'background-color':'blue','color':'rgba(255,255,255,1)'}}">

<div data-inven-action data-inven-nick-default="보라지붕" style="border:0px;padding:0;margin:0;">

<span data-inven-attr-for="input" style="display:none;"></span>

<span data-inven-attr-for="last-attack-5" style="background-color:rgba(255,255,255,0); width: 92px; height: 92px; color: rgba(255, 255, 255, 

0);border-radius:123px;padding:0;margin:0;transition:0.4s;border:0px;font-family: 'Jeju Gothic', sans-serif;font-size:15px;" data-inven-

text="마격"

data-inven-over-css="{'_SELF_':{'color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'color':'rgba(255,255,255,0)'}}"></span>

</div></div></div>

<!-- 쪽지 보내기 : 닉네임 입력-->

<div style='background: url("셋째 상자 이미지"); margin: 0px 15px; border-radius: 10px; border: 3px solid white; border-image: none; width: 

92px; height: 92px; overflow: hidden; display: inline-block;'>

<div style="transition:0.4s; width: 92px; height: 92px; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;" data-

inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-over-css="{'_SELF_':

{'background-color':'green','color':'rgba(255,255,255,1)'}}">

<div data-inven-action data-inven-nick-default="보라지붕" style="border:0px;padding:0;margin:0;">

<span data-inven-attr-for="input" style="display:none;"></span>

<span data-inven-attr-for="send-note" style="background-color:rgba(255,255,255,0); width: 92px; height: 92px; color: rgba(255, 255, 255, 

0);border-radius:123px;padding:0;margin:0;transition:0.4s;border:0px;font-family: 'Jeju Gothic', sans-serif;font-size:15px;" data-inven-

text="쪽지"

data-inven-over-css="{'_SELF_':{'color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'color':'rgba(255,255,255,0)'}}"></span>

</div></div></div>

</div></div></div>