Advertisement
RyanJEarnshaw

Untitled

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