|
|
| 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: 10; | + | padding: 0; |
| | font-weight: 300;*/ | | font-weight: 300;*/ |
| | } | | } |
| Line 23: |
Line 20: |
| | } | | } |
| | | | |
| − | /* Modal Image */
| + | p {padding-top: 0px; padding-right: 200px; padding-bottom: 10px; padding-left: 200px;} |
| | | | |
| − | /* The Modal (background) */ | + | </style> |
| − | .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) */
| + | <style> |
| − | .modal-content {
| + | p{ background-color: #f7f3ed;} |
| − | margin: auto;
| + | button{border: 0; background-color: #f7f3ed;} |
| − | display: block;
| + | figure { background-color: #f7f3ed;} |
| − | width: 60%;
| + | h2{ background-color: #f7f3ed;} |
| − | height: 90%;
| + | h2{background-color: #f7f3ed;} |
| − | max-width: 700px;
| + | body{background-color: #f7f3ed;} |
| − | } | + | </style> |
| | + | </head> |
| | | | |
| − | /* 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> |
| | | | |
