| title | layout |
|---|---|
Gallery |
page |
body { margin: 0; font-family: Arial; }
.header { text-align: center; padding: 32px; }
.row { display: -ms-flexbox; /* IE10 / display: flex; -ms-flex-wrap: wrap; / IE10 */ flex-wrap: wrap; padding: 0 4px; }
/* Create four equal columns that sits next to each other / .column { -ms-flex: 32%; / IE10 */ flex: 32%; max-width: 32%; padding: 0 2px; }
.column img { margin-top: 8px; vertical-align: middle; width: 100%; }
/* Responsive layout - makes a two column-layout instead of four columns */ @media screen and (max-width: 800px) { .column { -ms-flex: 50%; flex: 50%; max-width: 50%; } }
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { -ms-flex: 100%; flex: 100%; max-width: 100%; } }
.container { position: relative; /* width: 50%; max-width: 300px; }
/* The overlay effect - lays on top of the container and over the image / .overlay { position: absolute; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); / Black see-through */ color: #f1f1f1; width: 100%; transition: .5s ease; opacity:0; color: white; font-size: 20px; padding: 20px; text-align: center; }
/* When you mouse over the container, fade in the overlay title */ .container:hover .overlay { opacity: 1; }
</style>
