RyanJEarnshaw

Untitled

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