sofiiayala

Tab #1 CSS

May 1st, 2014
3,816
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.75 KB | None | 0 0
  1. #tab1 {
  2. width: 13px;
  3. height: 13px;
  4. border: solid 1px #000; /*Here change the border color*/
  5. background-color: #000; /*Here change the background color*/
  6. margin-left: 10px;
  7. margin-top: 10px;
  8. position: fixed;
  9. overflow:hidden;
  10. -webkit-transition: opacity 0.4s linear;
  11. -webkit-transition: all 0.4s linear;
  12. -moz-transition: all 0.4s linear;
  13. -o-transition: all 0.4s linear;
  14. }
  15.  
  16. #tab1:hover {
  17. width: 130px;
  18. height: 168px;
  19. background-color: #fff;
  20. z-index: 99999;
  21. -webkit-transition: opacity 0.4s linear;
  22. -webkit-transition: all 0.4s linear;
  23. -moz-transition: all 0.4s linear;
  24. -o-transition: all 0.4s linear;
  25. }
  26.  
  27. #tab2 {
  28. width: 13px;
  29. height: 13px;
  30. border: solid 1px #000; /*Here change the border color*/
  31. background-color: #000; /*Here change the background color*/
  32. margin-left: 35px;
  33. margin-top: 10px;
  34. position: fixed;
  35. overflow:hidden;
  36. -webkit-transition: opacity 0.4s linear;
  37. -webkit-transition: all 0.4s linear;
  38. -moz-transition: all 0.4s linear;
  39. -o-transition: all 0.4s linear;
  40. }
  41.  
  42. #tab2:hover {
  43. width: 130px;
  44. height: 168px;
  45. background-color: #fff;
  46. -webkit-transition: opacity 0.4s linear;
  47. -webkit-transition: all 0.4s linear;
  48. -moz-transition: all 0.4s linear;
  49. -o-transition: all 0.4s linear;
  50. }
  51.  
  52. #tab3 {
  53. width: 13px;
  54. height: 13px;
  55. border: solid 1px #000; /*Here change the border color*/
  56. background-color: #000; /*Here change the background color*/
  57. margin-left: 10px;
  58. margin-top: 35px;
  59. position: fixed;
  60. overflow:hidden;
  61. -webkit-transition: opacity 0.4s linear;
  62. -webkit-transition: all 0.4s linear;
  63. -moz-transition: all 0.4s linear;
  64. -o-transition: all 0.4s linear;
  65. }
  66.  
  67. #tab3:hover {
  68. width: 130px;
  69. height: 168px;
  70. background-color: #fff;
  71. -webkit-transition: opacity 0.4s linear;
  72. -webkit-transition: all 0.4s linear;
  73. -moz-transition: all 0.4s linear;
  74. -o-transition: all 0.4s linear;
  75. }
  76.  
  77. .inside {
  78. width: 110px;
  79. padding: 10px;
  80. padding-top: 8px;
  81. font-family: sans-serif;
  82. font-size: 9px;
  83. line-height: 150%;
  84. color: #5a5a5a; /*Change here the text color*/
  85. background-color: #fff; /*Change here the inside background color*/
  86. letter-spacing: .8px;
  87. text-align: center;
  88. padding-bottom:1000px;
  89. opacity: 0;
  90. -webkit-transition: opacity 0.3s linear;
  91. -webkit-transition: all 0.3s linear;
  92. -moz-transition: all 0.3s linear;
  93. -o-transition: all 0.3s linear;
  94. }
  95.  
  96. .inside:hover {
  97. opacity: 1;
  98. -webkit-transition: opacity 0.3s linear;
  99. -webkit-transition: all 0.3s linear;
  100. -moz-transition: all 0.3s linear;
  101. -o-transition: all 0.3s linear;
  102. }
Advertisement
Add Comment
Please, Sign In to add comment