elsaofarendelle

Hover Title/Description Tab

May 23rd, 2016 (edited)
85
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.00 KB | None | 0 0
  1. #elsa {
  2. position:fixed;
  3. left:270px;
  4. top:520px;
  5. z-index:999;
  6. }
  7.  
  8. #elsa:hover #anna {
  9. opacity:1;
  10. -webkit-transition: all .7s ease-in-out;
  11. -moz-transition: all .7s ease-in-out;
  12. -o-transition: all .7s ease-in-out;
  13. }
  14.  
  15. #anna {
  16. background:#bca6a2;
  17. font-size:10px;
  18. color:#eee;
  19. font-family:'Radley', serif;
  20. text-align:center;
  21. width:125px;
  22. top:250px;
  23. left:100px;
  24. padding:0px 5px 0px 5px;
  25. position:fixed;
  26. opacity:0;
  27. -webkit-transition: all .7s ease-in-out;
  28. -moz-transition: all .7s ease-in-out;
  29. -o-transition: all .7s ease-in-out;
  30. }
  31.  
  32. #snowman {
  33. font-family: 'Ever After';
  34. font-style:uppercase;
  35. color:#eee;
  36. text-shadow: 0px 0px 3px #eee;
  37. font-size:30px;
  38. width: 150px;
  39. height: auto;
  40. top:0px;
  41. left:0px;
  42. }
  43.  
  44. #snowman: hover {
  45. font-family: 'Ever After';
  46. font-style:uppercase;
  47. color:#eee;
  48. text-shadow: 0px 0px 3px #eee;
  49. font-size:30px;
  50. width: 150px;
  51. }
  52.  
  53. <div id="elsa">
  54. <div id="snowman">Title Here</div>
  55. <div id="anna">
  56. <center>
  57. <p>Description Here.</p>
  58. </center>
  59. </div>
  60. </div>
Advertisement
Add Comment
Please, Sign In to add comment