Advertisement
RyanJEarnshaw

Untitled

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