Line 8: | Line 8: | ||
.foo:hover img:first-child{display:none} | .foo:hover img:first-child{display:none} | ||
.foo:hover img:last-child{display:inline-block} | .foo:hover img:last-child{display:inline-block} | ||
+ | |||
+ | |||
+ | p {padding-top: 0px; padding-right: 200px; padding-bottom: 10px; padding-left: 200px;} | ||
} | } | ||
/*h2 { | /*h2 { | ||
− | padding: | + | padding: 10; |
font-weight: 300;*/ | font-weight: 300;*/ | ||
} | } | ||
Line 20: | Line 23: | ||
} | } | ||
− | + | /* Modal Image */ | |
− | + | /* The Modal (background) */ | |
+ | .modal { | ||
+ | display: none; /* Hidden by default */ | ||
+ | position: fixed; /* Stay in place */ | ||
+ | z-index: 1; /* Sit on top */ | ||
+ | padding-top: 100px; /* Location of the box */ | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; /* Full width */ | ||
+ | height: 100%; /* Full height */ | ||
+ | overflow: auto; /* Enable scroll if needed */ | ||
+ | background-color: rgb(0,0,0); /* Fallback color */ | ||
+ | background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ | ||
+ | } | ||
− | + | /* Modal Content (image) */ | |
− | + | .modal-content { | |
− | + | margin: auto; | |
− | + | display: block; | |
− | + | width: 60%; | |
− | + | height: 90%; | |
− | + | max-width: 700px; | |
− | + | } | |
− | + | ||
+ | /* Caption of Modal Image */ | ||
+ | #caption { | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | width: 60%; | ||
+ | max-width: 700px; | ||
+ | text-align: center; | ||
+ | color: #ccc; | ||
+ | padding: 10px 0; | ||
+ | height: 150px; | ||
+ | } | ||
+ | |||
+ | /* Add Animation */ | ||
+ | .modal-content, #caption { | ||
+ | -webkit-animation-name: zoom; | ||
+ | -webkit-animation-duration: 0.6s; | ||
+ | animation-name: zoom; | ||
+ | animation-duration: 0.6s; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes zoom { | ||
+ | from {-webkit-transform:scale(0)} | ||
+ | to {-webkit-transform:scale(1)} | ||
+ | } | ||
+ | |||
+ | @keyframes zoom { | ||
+ | from {transform:scale(0)} | ||
+ | to {transform:scale(1)} | ||
+ | } | ||
+ | |||
+ | /* The Close Button */ | ||
+ | .close { | ||
+ | position: absolute; | ||
+ | top: 15px; | ||
+ | right: 35px; | ||
+ | color: #f1f1f1; | ||
+ | font-size: 40px; | ||
+ | font-weight: bold; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | .close:hover, | ||
+ | .close:focus { | ||
+ | color: #bbb; | ||
+ | text-decoration: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | /* 100% Image Width on Smaller Screens */ | ||
+ | @media only screen and (max-width: 700px){ | ||
+ | .modal-content { | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | background-color: #f7f3ed; | ||
+ | } | ||
+ | button{ | ||
+ | border: 0; background-color: #f7f3ed; | ||
+ | } | ||
+ | figure { | ||
+ | background-color: #f7f3ed; | ||
+ | } | ||
+ | h2{ | ||
+ | background-color: #f7f3ed; | ||
+ | } | ||
+ | body { | ||
+ | background-color: #f7f3ed; | ||
+ | } | ||
+ | foo { | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | </style> | ||
</head> | </head> | ||
Revision as of 06:52, 14 October 2017
Our Team
Meet our advisors
×