#hover updates

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 will need to have two essential parts to create your hover box - the css to style the box, and the html to include it in your theme…

here’s our basic theme - complete with a visible description -

the first thing we need to do is remove the description from the theme!  in your theme, go down to the html part ( below the tag ) and find where the description is in your theme - it might look a little something like this -

{description}

( you can also do a ‘find’ and look for ‘{description} ) the only thing we need to remove is {description} so delete that part

refresh your page and it should have disappeared -

now we’re ready to pop in your hover -

first of all we need to position the element on our page – so in your css add;

#hoverbox {   position:fixed;   top:30px;   margin-left:30px;}

then we need to style the area for the content

#hovercontent {   margin-top:10px;   width:150px;   color:#fff;}

and add in the html - just put this immediately below the tag.

   {description}

we’ve added back in the code to show your description, however, if you want something different, you can just add text there instead!

update your preview!

and you can now see your description again!

why do it this way?  because it’s very difficult to position an invisible element.  now i can tweak my positioning to get it in the right place while it’s still visible - all i need to do is change my ‘top’ and ‘margin-left’ values to put it where i’d like it to appear.

i’m just going to change the positioning in my ‘hoverbox’ css to move it–

#hoverbox {   position:fixed;   top:250px;   margin-left:850px;}

now we can add in the opacity.  we want the content to be invisible, so we give it an opacity of ‘0′

#hovercontent {   margin-top:10px;   width:150px;   color:#fff;  opacity:0;}

update your preview and your description will disappear.  however, we want it to reappear when we hover over it - so we need another css section.

#hoverbox:hover #hovercontent {   opacity:1;   -webkit-transition: all 0.7s ease;   -moz-transition: all 0.7s ease;   -o-transition: all 0.7s ease;}

this piece of css informs that when we hover over the hoverbox, the hovercontent will have an opacity of ‘1′ ( fully visible ) - and we’ve also included a transition here which we’ll also add to the original hovercontent so it fades in and out nicely.

#hovercontent {   margin-top:10px;   width:150px;   color:#fff;   opacity:0;   -webkit-transition: all 0.7s ease;   -moz-transition: all 0.7s ease;   -o-transition: all 0.7s ease;}

update your preview and when you hover over the area, your description will appear!  

this is basically what we want, but it also helps if you indicate to your friends where they can hover for extra info with an icon or a word, otherwise they might not know the box is there at all!

we’re just going to add in a title, inside our hoverbox, but outside of our hovercontent.  you can style the title however you like, or even use an image;

#hovertitle {    font-size: 10px;    line-height: 15px;    letter-spacing:2px;    font-weight:normal;    color:#fff;}

then add it into the html - again, inside the box, but outside of the content!

hover ( put whatever you like here! )

{description}

you can style these elements however you like - but that’s about it for the basics!

have fun hovering :3