Advertisement
RyanJEarnshaw

Untitled

Sep 30th, 2016
58
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.48 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.  
  49. #map {
  50. transition: all .2s ease-in-out;
  51. position: absolute;
  52. display: inline-block;
  53. top: 0;
  54. left: 5%;
  55. width: 90%;
  56. height: 58%;
  57. margin-top: 42%;
  58. overflow: hidden;
  59. -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  60. -moz-box-sizing: border-box; /* Firefox, other Gecko */
  61. box-sizing: border-box; /* Opera/IE 8+ */
  62. border: 4px dotted rgba(255,255,255,1);
  63. }
  64. #map img {
  65. transition: all .2s ease-in-out;
  66. top:0;
  67. left: 0;
  68. width: 100%;
  69. }
  70. #map:hover img {
  71. width: 200%;
  72. margin-left: -70%;
  73. margin-top: -10%;
  74. }
  75. #mappopup {
  76. transition: all .2s ease-in-out;
  77. transition-delay: 0s;
  78. position: absolute;
  79. top: 47%;
  80. right: 19%;
  81. width: 30%;
  82. height: 0%;
  83. border-radius: 10px;
  84. background-color: #132E32;
  85. }
  86. /*arrow*/
  87. #mappopup:after {
  88. transition: all .2s ease-in-out;
  89. transition-delay: 0s;
  90. content: '';
  91. position: absolute;
  92. top: 100%;
  93. left: 50%;
  94. margin-left: -8px;
  95. width: 0; height: 0;
  96. border-top: 0px solid #132E32;
  97. border-right: 0px solid transparent;
  98. border-left: 0px solid transparent;
  99. }
  100. #mappopup h3 {
  101. transition: all .2s ease-in-out;
  102. transition-delay: 0s;
  103. font-family: 'Raleway';
  104. color: #1D84B5;
  105. font-size: 100%;
  106. opacity: 0;
  107. }
  108. #map #mapcontainer:hover #mappopup{;
  109. transition: all .2s ease-in-out;
  110. transition-delay: 0.3s;
  111. height: 7%;
  112. }
  113. #map #mapcontainer:hover #mappopup h3 {
  114. transition: all .2s ease-in-out;
  115. transition-delay: 0.3s;
  116. opacity: 1;
  117. }
  118. #map #mapcontainer:hover #mappopup:after {
  119. transition-delay: 0.5s;
  120. border-top: 8px solid #132E32;
  121. border-right: 8px solid transparent;
  122. border-left: 8px solid transparent;
  123. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement