Discover Top Posts Tagged with #hover tab

Nougat | Hover Tab

I have had a few people ask about my Hover Tab on my Theme. And a few ask if I would give a tutorial or release the codes for it. So I decided to do a Tutorial and Codes. Below the cut you will find the Tutorial.

#Tutorials #Hover Tab #My Codes #My Tutorials #Codes

a simple hover updates tab by generalcodes

includes meta tags for styling and positioning

fades in and out

paste this code under the last <meta....

then, paste this directly under <style type="text/css">

finally, paste this code directly under <body>

#updates tab #hover tab #generalcodes

Idea help pls bubs

If anyone has any ideas for what I should be in my hover tab that would be great because rn it’s consisting of a lot of bloops..

#ideas #idea #help #stuck #hover tab #code

Here is a jsfiddle showing how to make a hover tab where you hover an image and a tab below it shows up

https://jsfiddle.net/oc01qpv9/1/

~aunty chlo

#tutorial #hover tab

Lacelephants's Hover Tab

People have been asking about my hover tab.. So here it is.

Preview.

#divider { background:#000; /** background color of dividers **/ background-image:url(''); /** background picture of dividers **/ color:#fff; /** text color **/ font-size:12px; /** font size **/ border:3px double lightgray; /** border width, style, color (respectively) **/ padding:3px; /** distance from content of divider to end of divider **/ } #sideslide { z-index: 9999999; position: fixed; /** stays at same position of page when scrolling down **/ text-align: center; /** centered text **/ left: -420px; /** space from left before hovering **/ top:5px; /** space from top before hovering **/ -webkit-transition-duration: .5s; /** how long it takes to slide out **/ -moz-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; } #sideslide:hover { z-index:999999; top: -85px; /** don't change unless advanced with css **/ left: 30px; /** distance from left on hover **/ opacity:1; /** transparency **/ } #insides { z-index:999999; top: 145px; /** distance from top to content **/ position: absolute; width: 380px; /** width **/ height: 280px; /** height **/ overflow-y: hidden; /** change to "scroll" for scrollbar **/ overflow-x:hidden; /** change to "scroll" for scrollbar **/ padding: 10px; /** space from all sides to content **/ color:#000; /** text color **/ background-image: url(''); /** background image **/ background:#fff; /** background color **/ opacity: 1; /** transparency **/ line-height: 13px; /** how tall each paragraph **/ -moz-box-shadow: 0px 0px 3px 1px white; /** shadow + color **/ -webkit-box-shadow: 0px 0px 3px 1px white; /** shadow + color **/ box-shadow: 0px 0px 3px 1px white; /** shadow + color **/ -webkit-border-radius: 3px; /** border radius **/ -moz-border-radius: 3px; border-radius: 5px; border: 1px solid black; /** border width, style, color **/ text-align: center; /** centered text **/ } .icon_button { z-index:99999; display: block; position: fixed; left: 25px; /** distance from top **/ top: 25px; /** distance from left **/ padding: 3px; /** added space **/ width: 35px; /** width of button **/ height: 35px; /** height of button **/ background-color: white; /** background color **/ border-radius: 55px; /** border radius **/ border: 0px solid black; /** border width, style, color **/ overflow: hidden; /** no scrollbars **/ -webkit-transition-duration: .5s; /** how long it takes to slide out **/ -moz-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; } .icon_button:hover { z-index:99999; display: block; position: fixed; left: 45px; /** distance from top **/ top: 25px; /** distance from left **/ padding: 3px; /** added space **/ width: 35px; /** width of button **/ height: 35px; /** height of button **/ background-color: white; /** background color **/ border-radius: 55px; /** border radius **/ border: 0px solid black; /** border width, style, color **/ overflow: hidden; /** no scrollbars **/ -webkit-transition-duration: .5s; /** how long it takes to slide out **/ -moz-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; }

#xoxo #hover tab #hover #tut #tutorial #easy

your update tab is amazing. where did you get it?

thank you!! i tweaked the one in the right corner from this lovely tutorial. and this is the one i've got in my links section. :)

#updates tab #hover tab #Anonymous

Hover Tab 001: DAWN

was coded to match the dawn theme, its simplicity mirrors the theme's simplicity :)

(hover tab 002) (open for requests!!)

LIVE PREVIEW | Steps:

#hover tab #tumblr hover tab #updates tab #networks tab #codes #dawn #update tabs #requested

#hover tab

Trending Tags

Recently Viewed Tags

#hover tab