img { width: inherit; height: inherit; } .info { background-color: transparent; color: white; font-size: medium; position: relative; padding: 5px; margin-top: -50px; transition: all .3s ease-out; -moz-transition: all .3s ease-out; -webkit-transition: all .3s ease-out; -o-transition: all .3s ease-out; } .photo-container { width: inherit; height: inherit; overflow: hidden; } .photo-name { display: inline-block; } .photo-position { display: inline-block; float: right; } a { color: white; } .photo-keywords { margin-top: 5px; font-size: small; text-align: right; display: inline-block; width: 100%; } .sk-cube-grid { width: 100%; height: 100%; } .sk-cube-grid .sk-cube { width: 33%; height: 33%; background-color: rgba(0, 0, 0, 0.1); float: left; -webkit-animation: sk-cubeGridScaleDelay 4.6s infinite ease-in-out; animation: sk-cubeGridScaleDelay 4.6s infinite ease-in-out; } .sk-cube-grid .sk-cube1 { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .sk-cube-grid .sk-cube2 { -webkit-animation-delay: 2.6s; animation-delay: 2.6s; } .sk-cube-grid .sk-cube3 { -webkit-animation-delay: 2.8s; animation-delay: 2.8s; } .sk-cube-grid .sk-cube4 { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; } .sk-cube-grid .sk-cube5 { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .sk-cube-grid .sk-cube6 { -webkit-animation-delay: 2.6s; animation-delay: 2.6s; } .sk-cube-grid .sk-cube7 { -webkit-animation-delay: 2s; animation-delay: 2s; } .sk-cube-grid .sk-cube8 { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; } .sk-cube-grid .sk-cube9 { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } @-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } @keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } }