Advertisement
RyanJEarnshaw

Untitled

Sep 30th, 2016
87
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.56 KB | None | 0 0
  1. #contentpane {
  2. position: relative;
  3. font-family: 'Lobster Two', sans-serif;
  4. font-weight: 400;
  5. font-size: 26px;
  6. font-style: normal;
  7. display: table;
  8. margin: 0 auto;
  9. text-align: center;
  10. margin-top: 5%;
  11. width: 90%;
  12. }
  13. #contentimage {
  14. height: 100%;
  15. width: 20%;
  16. float: left;
  17. margin: 0 auto;
  18. position: relative;
  19. }
  20. #contentimage img {
  21. max-width:100%;
  22. max-height:100%;
  23. }
  24. #contentpane {
  25. display: inline-block;
  26. position: relative;
  27. margin-left: auto;
  28. margin-right: auto;
  29. width: 100%;
  30. }
  31. #text {
  32. float: left;
  33. color: white;
  34. margin-top: 1%;
  35. font-family: 'Work Sans', sans-serif;
  36. font-size: 1.2vmax;
  37. position: relative;
  38. width: 60%;
  39. margin-bottom: 62%;
  40. }
  41.  
  42. #contentpane p {
  43. line-height: 200%;
  44. font-weight: 300;
  45. margin-bottom: 10%;
  46. }
  47.  
  48. #prizeheading {
  49. font-size: 1.6vmax;
  50. }
  51. #prizeheading h3 {
  52. font-weight: 400;
  53. }
  54. #map {
  55. transition: all .2s ease-in-out;
  56. position: absolute;
  57. display: inline-block;
  58. top: 0;
  59. left: 0;
  60. width: 100%;
  61. height: 47%;
  62. margin-top: 60%;
  63. overflow: hidden;
  64. -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  65. -moz-box-sizing: border-box; /* Firefox, other Gecko */
  66. box-sizing: border-box; /* Opera/IE 8+ */
  67. border: 4px dotted rgba(255,255,255,1);
  68. }
  69. #map img {
  70. transition: all .2s ease-in-out;
  71. top:0;
  72. left: 0;
  73. width: 100%;
  74. }
  75. #map:hover img {
  76. width: 200%;
  77. margin-left: -70%;
  78. margin-top: -10%;
  79. }
  80. #mappopup {
  81. transition: all .2s ease-in-out;
  82. transition-delay: 0s;
  83. position: absolute;
  84. top: 47%;
  85. right: 19%;
  86. width: 30%;
  87. height: 0%;
  88. border-radius: 10px;
  89. background-color: #132E32;
  90. }
  91. /*arrow*/
  92. #mappopup:after {
  93. transition: all .2s ease-in-out;
  94. transition-delay: 0s;
  95. content: '';
  96. position: absolute;
  97. top: 100%;
  98. left: 50%;
  99. margin-left: -8px;
  100. width: 0; height: 0;
  101. border-top: 0px solid #132E32;
  102. border-right: 0px solid transparent;
  103. border-left: 0px solid transparent;
  104. }
  105. #mappopup h3 {
  106. transition: all .2s ease-in-out;
  107. transition-delay: 0s;
  108. font-family: 'Raleway';
  109. color: #1D84B5;
  110. font-size: 100%;
  111. opacity: 0;
  112. }
  113. #map #mapcontainer:hover #mappopup{;
  114. transition: all .2s ease-in-out;
  115. transition-delay: 0.3s;
  116. height: 7%;
  117. }
  118. #map #mapcontainer:hover #mappopup h3 {
  119. transition: all .2s ease-in-out;
  120. transition-delay: 0.3s;
  121. opacity: 1;
  122. }
  123. #map #mapcontainer:hover #mappopup:after {
  124. transition-delay: 0.5s;
  125. border-top: 8px solid #132E32;
  126. border-right: 8px solid transparent;
  127. border-left: 8px solid transparent;
  128. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement