How to make a description box that fades in when you hover over it.
And how to add some cool customizations that I see pretty often such as rotating the “hover” text, changing the size of the box, and giving the box a background image or color.
Rules: No need to credit me as its a very simple tutorial.
To view it in action go here.
Go to your blog’s code and find the CSS section. It will say
<style type="text/css">
Take this code and paste it right under that.
Now find the HTML section. Look for the following (note: sometimes there is additional text between < / style > and < body > just make sure you are underneath < body >)
< / style > < body >
Paste this code there.
Now you just need to replace “Here's your content.” with whatever you want your box to say. In the code I’ve included some basic information for repositioning it and styling your text. Below I’ll add some things that I see pretty commonly.
Rotate the “Hover” text.
For this you need the CSS transform property, which you can read more about on w3schools.
Find the #updatetitle part of your code.
Now you add in the rotate code which I will paste below. You’ve presumably been in enough math classes to understand how rotate things by degree works, just change the (90deg) to something else, and see what happens. JUST MAKE SURE YOU CHANGE ALL THREE TO THE SAME THING!!!
You can use anything from -180 to 180 degrees.
-ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ transform: rotate(90deg);
Give the box a background color
This is particularly helpful if you have a busy background.
Scroll farther to give it an image as a background.
To give it a colored background, you’ll need a hex code for whatever color you want to make it appear as. There are a lot of great online resources you can use, and I’ll throw out hexcolorcode.com just to give you an easy one.
Once you’ve played on the website (lets be real, you just spent a few minutes playing, did you?), you need to get your color code. The one we’ll need should be six digits with a # in front of it.
Mine is bright blue and looks like this: #a5d9ee
Go into your code and find the highlighted section.
Now replace the word transparent with your color code!!
Give the box a defined size & scroll bar
This gives it a set height and width, and a scroll bar.
Note: the scroll bar will match the scroll bar on your theme, so if you don’t want that I’d recommend changing the scrollbar (you should be able to google it, fyi, but if you can’t figure it out let me know).
This is great if you want to put a lot of information in your box. Why? Here, I’ll show you. See how I put in a lot of information and now it just runs off the bottom of the page? Yeah, trust me, you don’t want that. (and ignore the text itself, its what I had handy while making this).
You know the drill by now, find the highlighted chunks of code:
As you’ll notice it already has a defined width of 200px, but the height is set to auto, which, as I said in the code, means that it will make itself as long as it needs to be to fit the content.
So lets give it a height, you can use whatever height and width you want (feel free to play around), but I’ll be making the height 200px so its a square. 400x200 would make a nice rectangle, just make sure it doesn’t go off the bottom of the page.
If you’re like me and you have a lot of text, you probably can’t see all of it, in fact, all the text I had copied and pasted there doesn’t show any more. So we need to tell it to scroll.
Go in your code and find “overflow:hidden;” which should be right below the size code we just edited.
Delete that line of code and replace it with this:
overflow-y:scroll;
Ta-da!! You’re done!!
Give the box a background image
This is very similar to the “Give the box a background color” tutorial above, but for this one, I’d also recommend giving it a defined size which I just showed.
The really nice thing is that the image will automatically fit the box you’re putting it in (provided it is bigger than said box).
I used a really cute image of Remy LeBeau/Gambit that I had laying around from when I made icons.
Go back to the #updates section we’ve been using and find this again:
Delete that line and replace it with the following:
background-image:url();/* --- box background image --- */
Now you just need to upload the photo somewhere - you can use tumblr’s photo uploader which you’ll find under the gear (settings icon) on the top left of your screen if you’re looking at your code. Click “theme assets” and then “upload a file”
Put your cursor where you want the url to go which is between the two parenthesis:
background-image:url(PUT YOUR URL HERE OR FIGHT ME);/* --- box background image --- */
Mine ended up looking like this:
background-image:url(http://static.tumblr.com/b8otuj9/Gsto8pxfv/gambitandcats-9171.jpg);
You can move the image around to where ever you’d like with in the box, but for that I’ll send you to w3schools page on background-position property. (or you can google it).
