Difference between revisions of "Template:Groningen"

Line 170: Line 170:
 
     display: block;
 
     display: block;
 
     max-width: 70%;
 
     max-width: 70%;
 +
    margin: auto;
 +
    text-align: center;
 +
    border-radius: 15px 50px 15px 50px;
 +
}
 +
.imglabh {
 +
    display: block;
 +
    max-height: 70%;
 
     margin: auto;
 
     margin: auto;
 
     text-align: center;
 
     text-align: center;
Line 190: Line 197:
 
  width:100%
 
  width:100%
 
}
 
}
−
 
 
.w3-button:hover{
 
.w3-button:hover{
 
  color:#000!important;
 
  color:#000!important;
Line 209: Line 215:
  
 
/* MODAL */
 
/* MODAL */
−
.imglab:hover {
 
−
  opacity: 0.85;
 
−
}
 
 
.imgsize:hover {opacity: 0.85;}
 
.imgsize:hover {opacity: 0.85;}
 +
.imglab:hover {opacity: 0.85;}
 +
.imglabh:hover {opacity: 0.85;}
 
/* The Modal (background) */
 
/* The Modal (background) */
 
.modal {
 
.modal {
Line 233: Line 238:
 
     width: auto;
 
     width: auto;
 
     max-width: 90%;
 
     max-width: 90%;
 +
    border-radius: 15px 50px 15px 50px;
 +
}
 +
.modal-contenth {
 +
    margin: auto;
 +
    display: block;
 +
    width: auto;
 +
    max-height: 75%;
 
     border-radius: 15px 50px 15px 50px;
 
     border-radius: 15px 50px 15px 50px;
 
}
 
}
 
/* Caption of Modal Image (Image Text) - Same Width as the Image */
 
/* Caption of Modal Image (Image Text) - Same Width as the Image */
 
#caption {
 
#caption {
 +
    margin: auto;
 +
    display: block;
 +
    width: auto;
 +
    max-width: 90%;
 +
    text-align: center;
 +
    color: #ccc;
 +
    padding: 10px 0;
 +
    height: 150px;
 +
}
 +
#captionh {
 
     margin: auto;
 
     margin: auto;
 
     display: block;
 
     display: block;
Line 248: Line 270:
 
/* Add Animation - Zoom in the Modal */
 
/* Add Animation - Zoom in the Modal */
 
.modal-content, #caption {
 
.modal-content, #caption {
 +
    -webkit-animation-name: zoom;
 +
    -webkit-animation-duration: 0.5s;
 +
    animation-name: zoom;
 +
    animation-duration: 0.5s;
 +
}
 +
.modal-contenth, #captionh {
 
     -webkit-animation-name: zoom;
 
     -webkit-animation-name: zoom;
 
     -webkit-animation-duration: 0.5s;
 
     -webkit-animation-duration: 0.5s;
Line 607: Line 635:
 
   <img class="modal-content" id="img01">
 
   <img class="modal-content" id="img01">
 
   <div id="caption"></div>
 
   <div id="caption"></div>
 +
</div>
 +
 +
<div id="myModalh" class="modal">
 +
  <img class="modal-contenth" id="img01h">
 +
  <div id="captionh"></div>
 
</div>
 
</div>

Revision as of 13:13, 25 October 2017