#hover description

[themesbyrhi]

“Wildside” theme by teentide! :)

this theme comes with:

2 columns

one circular sidebar photo

7 icon links

short hover chat bubble description

tooltips

one short blogtitle

“zoom-in” on post hover

delay hover transitions

preview || message me for the code (include the name of the theme and you must have liked this post)

message me if you have any problems!

PLEASE LIKE IF USING OR THINKING OF USING!

[themesbyrhi]

“Tease” theme by teentide! :)

this theme comes with:

2 columns

one circular sidebar photo

option of 4 or 7 links

short to medium length hover description

tooltips

one short to medium length blogtitle

“zoom-in” on post hover

delay hover transitions

preview || message me for the code (include the name of the theme and you must have liked this post)

message me if you have any problems!

PLEASE LIKE IF USING OR THINKING OF USING!

[themesbyrhi]

“Wasteland” theme by teentide! :)

this theme comes with:

2 columns

one square sidebar photo

5 links

medium to long length hover description

tooltips

one short to medium length blogtitle

“zoom-in” on post hover

preview || message me for the code (include the name of the theme and you must have liked this post)

message me if you have any problems!

PLEASE LIKE IF USING OR THINKING OF USING!

[themesbyrhi]

“Runaway” theme by teentide! :)

this theme comes with:

2 or 3 columns

one square sidebar photo

5 hover links

spinning links on sidebar hover

color change on link hover

short hover description

“growing” line detail

tooltips

one short length blogtitle

fly in permalinks

preview || message me for the code (include the name of the theme and you must have liked this post)

message me if you have any problems!

PLEASE LIKE IF USING OR THINKING OF USING!

[octomoosey]

Hiya! I was looking at your custom theme #3, and it has this thing where if you hover over big Hover sign, then the description becomes visible. Could I please ask how you did that? Is it jQuery or something? (If you'd rather not tell, then that's absolutely fine, and thanks anyway!)

hi there,no jquery involved, it’s all just css...  there’s already a tutorial for making a hover description over on my tutorials page;

how to add a hover updates/description

there are also other tutorials out there that you could also check out;

hover description by tutorial queen

hover description by html-tutorials

[noodlehelps]

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).

[octomoosey]

Hey there, I have been trying to find how to do the hover descriptions on contained themes that look kind of like an updates tab and I was wondering if maybe you knew how? Thank you, even if you don't still thank you because you do so much for the rp community and you're just amazing<3

hello there nonny,

settle in, it’s tutorial time!

how to make a hover description or updates tab

e.g.

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

if you found this useful, a like or reblog is always appreciated - thanks!

[intrins-themes]

theme 23: philos by intrins-themes

preview // code

features:

single column

up to 5 custom links

400px posts

hover description

header image

highly customizable

please like // reblog if using