Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- #contentpane {
- position: relative;
- font-family: 'Lobster Two', sans-serif;
- font-weight: 400;
- font-size: 26px;
- font-style: normal;
- display: table;
- margin: 0 auto;
- text-align: center;
- margin-top: 5%;
- width: 90%;
- }
- #contentimage {
- height: 100%;
- width: 20%;
- float: left;
- margin: 0 auto;
- position: relative;
- }
- #contentimage img {
- max-width:100%;
- max-height:100%;
- }
- #contentpane {
- display: inline-block;
- position: relative;
- margin-left: auto;
- margin-right: auto;
- width: 100%;
- }
- #text {
- float: left;
- margin-top: 1%;
- font-family: 'Raleway';
- font-size: 1.5vw;
- position: relative;
- width: 60%;
- margin-bottom: 60%;
- }
- #contentpane p {
- margin-bottom: 10%;
- }
- #map {
- position: absolute;
- display: inline-block;
- top: 0;
- left: 5%;
- width: 90%;
- height: 51%;
- margin-top: 43%;
- overflow: hidden;
- border: 4px solid grey;
- }
- #map img {
- transition: all .2s ease-in-out;
- top:0;
- left: 0;
- width: 100%;
- }
- #map:hover img {
- width: 200%;
- margin-left: -70%;
- margin-top: -10%;
- }
- #mappopup {
- transition: all .2s ease-in-out;
- transition-delay: 0s;
- position: absolute;
- top: 47%;
- right: 19%;
- width: 30%;
- height: 0%;
- border-radius: 10px;
- background-color: #132E32;
- }
- /*arrow*/
- #mappopup:after {
- transition: all .2s ease-in-out;
- transition-delay: 0s;
- content: '';
- position: absolute;
- top: 100%;
- left: 50%;
- margin-left: -8px;
- width: 0; height: 0;
- border-top: 0px solid #132E32;
- border-right: 0px solid transparent;
- border-left: 0px solid transparent;
- }
- #mappopup h3 {
- transition: all .2s ease-in-out;
- transition-delay: 0s;
- font-family: 'Raleway';
- color: #1D84B5;
- font-size: 100%;
- opacity: 0;
- }
- #map #mapcontainer:hover #mappopup{;
- transition: all .2s ease-in-out;
- transition-delay: 0.3s;
- height: 7%;
- }
- #map #mapcontainer:hover #mappopup h3 {
- transition: all .2s ease-in-out;
- transition-delay: 0.3s;
- opacity: 1;
- }
- #map #mapcontainer:hover #mappopup:after {
- transition-delay: 0.5s;
- border-top: 8px solid #132E32;
- border-right: 8px solid transparent;
- border-left: 8px solid transparent;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement