Descricao hover na imagem

Boa noite queridos (^ω^) Tudo bem com todos? Espero que sim, então, dei uma fechadinha básica por alguns dias no blog para troca de layout, a maioria vai se perguntar porque ela fez isso novamente. Então, eu amei o tema do Wanna one sabe, mas queria algo mais elaboradinho e com cara de html, o que eu quero dizer com isso? Bem, efeitos legais, layout com cara de blog de html mesmo. Os layouts anteriores estavam simples demais, então fui e mudei ^0^

E me desculpe pela demora de estar postando, mas tive que sair e só cheguei agora. Eu estou bem ansiosa pois tem tantos tutoriais e materiais para trazer para vocês. Eu fiquei um bom tempo pensando o que iria fazer e agora já sei tudo o que quero postar, vai ser de grande utilidade a todos. Até já deixei alguns posts em rascunho hihi Quero aproveitar e fazer isto antes que eu volte para a faculdade. Povo, se não der para ver o tuto em live preview vejam pela imagem.

Vamos lá então? LIVE PREVIEW (/*^3^)/

Vá até o modelo, cliquem em editar html e dentro procurem por </b:skin> quando encontrarem acima dele vocês irão colar o código abaixo:

/* ---  Character Box ---  */

#characters {
display:inline-block;
width:450px;
height:200px;
margin:0px 20px 35px 20px;
padding: 5px;
border: #COR 1px solid;
}
#characterimg {
width:450px;
height:200px;
z-index:-1;
opacity:0.8;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
#characterimg:hover {
opacity:0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
/* ---  Character Hover Info ---  */
#charimg {
position:absolute;
height:145px;
width:145px;
margin-top:0px;
margin-left:0px;
z-index:2;
opacity:0.8;
}
#character {
position:absolute;
margin-top:-186px;
margin-right:10px;
margin-left:15px;
width:400px;
height:150px;
padding:10px;
background-color:#ffffff;
z-index:1;
opacity:0;
-webkit-transition: all 350ms linear;
-moz-transition: all 350ms linear;
-ms-transition: all 350ms linear;
-o-transition: all 350ms linear;
transition: all 350ms linear;
}
#character:hover{
opacity:1;
}
#characters:hover #character{
opacity:1;
}
#characterinfo {
position:absolute;
overflow:scroll;
margin-top:0px;
margin-left:155px;
width:245px;
height:145px;
height:160px;
}
.charname {
font-family: Georgia, sans-serif;
font-size:16px;
text-transform:none;
text-align:center;
font-style:italic;
color:#COR;
margin:10px 0 10px 0;
}
.charinfo {
color:#COR;
text-align:center;
letter-spacing:1px;
}
#characterinfo a {
border:0px;
text-decoration:none;
color:#COR;
font-style:italic;
-webkit-transition: all 10ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
transition: all 100ms linear;
}
#characterinfo a:hover {
color:#COR;
}

Prestem atenção, vocês podem alterar quase tudo, tamanho do fundo da descrição, a imagem do bias, cor da borda em volta e cor das fontes, qualquer coisa me perguntem, e para funfar os links, dentro de um gadget java script, cole o seguinte código:

<div id="characters">
<div id="characterimg">
<img src="IMAGEM DO FUNDO" />
</div>
<div id="character">
<div id="charimg">
<img src="IMAGEM DO BIAS" />
                         
</div>
<div id="characterinfo">
<div class="charname">NOME DO BIAS</div>
<div class="charinfo">
SUBTÍTULO AQUI

<p>
<p>

DESCRIÇÃO BEM FOFA SOBRE O SEU BIAS AQUI

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

Salve, depois olhe para ver se está tudo certinho, qualquer coisa volte e olhe todo o código do html para conferir se está tudo feito corretamente. 

E PARA QUEM NÃO CONSEGUE ABRIR O LINK CONFERE AS IMAGENS ABAIXO.