#hover box

in your html : 

name

gender- age- ethnic- haircolor - eyecolor - knowfor

In your css : 

/* Box (Original) —————————– */

.hoverbox {float: left;width: 115px;background:#f3f3f3;margin: 2px;

}

.poster {margin: 0px; padding: 0px; width: 115px; height: 184px;}

.text {position: absolute;top: 2px;left: 2px; right: 2px;bottom:2px;width: 111px;height: 180px;/*padding: 0px 0px;  */font-size: 10px;text-align: justify; background: #f3f3f3; opacity: 0; -webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}

.hoverbox:hover .text {opacity: 1;-webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}

.hoverbox-title {margin: 10px 0px 4px; text-align: center; margin-top: 50%;font-family: ‘Open Sans’, 'Lucida Sans’, sans-serif;font-weight: 700; font-size: 11px; color: #2B2B2B;text-decoration: none;text-transform: uppercase; line-height: 100%; padding-bottom: 5px; border-bottom: 1px dotted #DDD; }

.hoverbox-title a {  width: 152px;  text-decoration: none;

 color: #666; /*Change the list titles color when hover*/ }.hoverbox-title:hover a { color: #999;

}

To install one yourself, you will do the following:

STEP 1

Put this code somewhere after - this area will be near the top of your theme code. Oh, and fyi - the settings in this section are currently set to my own, but you are free to play with font family, style, color, etc. Just follow the instructions in the code. Also, make sure you pay attention to the margins, because that will determine how far away your hover box appears from your actual cursor.

STEP 2

Put this code  sometime before - I usually like to put it directly after {CustomCSS}, but it’s up to you as long as it’s somewhere in the header section.

STEP 3

Lastly, every time you make a link that you want hover text on, you will need to build it a little differently in order to tell the code that it needs to put a label on its link. It will look like this:

href="http://yourlink.com"> this is where the NON-hover link text will go, so if you’re using the tooltip you’ll probably be putting a symbol or something here!

If you have any other questions, please let me know!

Q: “Do I need to credit you if I use these codes?”