I just made a new FAQs section with cute little effects.
Here's some screen shots:
To see it in action click
here.
You can make your own images and adjust the codes to fit your profile if you'd like.
Here's the HTML code:
<div id="casinorules"></div>
<div id="faqs"><div id="analq"></div><div id="phoneq"></div><div id="squirtq"></div></div></a></div>
<a><div id="faqs1"><div id="fistq"></div><div id="pokerq"></div><div id="favsq"></div></div></a></div>
Here's the CSS code:
#casinorules {
display:block;
position:relative;
margin-left:-50px;
height:84px;
width:1110px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNV3nLhzH9HFaxquvsnEkoGqelWinOlnc5f09X1c5ss39HRCpABD5gpI60JrLAXOQaJZGRFRmdMBWDliPW5v2C-7zUa-HBMTAAOVW0QLApvPiVSpqqprG-m_uWu-c5dCihj0RFNLl_p7Xg/s1600/LPr3l0UBslft.png) no-repeat top;
overflow:hidden;
}
#faqs {
display:inline-block;
width:950px;
height:170px;
overflow:hidden;
margin-left:30px;
border-bottom:0 solid #000;
-webkit-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
-moz-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
}
#analq {
width:308px;
height:176px;
float:left;
display:block;
background:transparent url(http://i.minus.com/iLHCZGY6rQ1A0.jpg) center top no-repeat;
}
#analq:hover {
background-image:url(http://i.minus.com/ibaMlqI3jx0Zq5.jpg);
}
#phoneq {
width:308px;
height:176px;
float:left;
display:block;
background:transparent url(http://i.minus.com/ibNqPWWSzX2MF.jpg) center top no-repeat;
}
#phoneq:hover {
background-image:url(http://i.minus.com/ib1p0meJIPqYaJ.jpg);
}
#squirtq {
width:308px;
height:176px;
float:left;
display:block;
background:transparent url(http://i.minus.com/iXQUIx7pp0D6D.jpg) center top no-repeat;
}
#squirtq:hover {
background-image:url(http://i.minus.com/ir3q4j0t4DBQB.jpg);
}
#faqs1 {
display:inline-block;
width:950px;
height:170px;
overflow:hidden;
margin-left:30px;
border-bottom:0 solid #000;
-webkit-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
-moz-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
}
#fistq {
width:308px;
height:176px;
float:left;
display:block;
background:transparent url(http://i.minus.com/im7MhKv5J9lzQ.jpg) center top no-repeat;
}
#fistq:hover {
background-image:url(http://i.minus.com/ibp193FjAEuxmV.jpg);
}
#pokerq {
width:308px;
height:176px;
float:left;
display:block;
background:transparent url(http://i.minus.com/i18qIzAKBvRTy.jpg) center top no-repeat;
}
#pokerq:hover {
background-image:url(http://i.minus.com/iJiuRriyRen2e.jpg);
}
#favsq {
width:308px;
height:176px;
float:left;
display:block;
background:transparent url(http://i.minus.com/iSaSDIi82bQ8e.jpg) center top no-repeat;
}
#favsq:hover {
background-image:url(http://i.minus.com/iCNVB8kO58GM6.jpg);
}