Have you wanted to make a hover box but have no clue how to do the hover code? I have a pretty blank-slate hover code that you can personalize to your heart's content :P
It can be a circle or a square (or anything you can code??). There are a few things it always needs to work:
Customizable options:
If you see any mistakes/errors, just hmu :P

— MJ is MAGICAL —
It can be a circle or a square (or anything you can code??). There are a few things it always needs to work:
- The width of the "niceboxy" div needs to be 20px less width and height than the div you put it inside. This is because the padding is 10px, while means it takes 10px on all sides (which equates to 20px height + width) to fit perfectly.
- Backgrounds, heights, widths.
Customizable options:
- border-radius: #px will make the corners rounder.
- fonts, line-height (which makes more fit inside), basically anything from a normal div
- margin-left: #px and margin-right: #px can separate the box from text if you're wanting to make it wrap. These would go on the outside div rather than the niceboxy one.
- float: left or float: right will make it "float" (aka have text wrap around it) on whichever side you choose. This would go on the outside div rather than the niceboxy one.
- If you want a background image for the outside div, use background-image:url('URLHERE') rather than the example code.
Code:
<link href="https://dl.dropbox.com/s/kk49gw9b5aupdn6/niceboxy.css?dl=0" rel="stylesheet"><div style="width: #px; height: #px; border-radius: #px; background: CAN BE IMAGE OR COLOR;"><div class="niceboxy" style="background: WHITE RECOMMENDED; width: 180px; height: #px; border-radius: #px;"></div></div>
If you see any mistakes/errors, just hmu :P

— MJ is MAGICAL —