.loading-img, .loading-img .box {
  position: absolute;
  left: 0;
  top: 0
}

.loading-img {
  background: #ddd;
  display: inline-block;
  width: 100%;
  height: 100%;
  z-index: 2
}

.loading-img .box {
  width: 78x;
  height: 78px;
  right: 0;
  bottom: 0;
  margin: auto
}

.loading-img .loading:after, .loading-img .loading:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%
}

.loading-img .loading:before {
  width: 35px;
  height: 35px;
  margin-top: -18px;
  margin-left: -18px;
  border-width: 2px 1px;
  border-style: solid;
  border-color: #000 rgba(0,0,0,.3);
  -webkit-animation: spin 3.45s infinite;
  -moz-animation: spin 3.45s infinite;
  -o-animation: spin 3.45s infinite;
  animation: spin 3.45s infinite
}

.loading-img .loading:after {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  margin-left: -3px;
  background-color: #000;
  -webkit-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
  -moz-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
  -o-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
  animation: pulse 6.9s infinite, borderPulse 6.9s infinite
}
@-webkit-keyframes 
spin { 0% {
transform:rotate(0)
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(1080deg)
}
}
@-moz-keyframes 
spin { 0% {
transform:rotate(0)
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(1080deg)
}
}
@-o-keyframes 
spin { 0% {
transform:rotate(0)
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(1080deg)
}
}
@keyframes 
spin { 0% {
transform:rotate(0)
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(1080deg)
}
}
@-webkit-keyframes 
pulse { 0%, 13%, 30%, 43%, 74% {
background-color:rgba(0,0,0,.2)
}
100%, 15%, 28%, 45%, 70% {
background-color:rgba(0,0,0,.9)
}
}
@-moz-keyframes 
pulse { 0%, 13%, 30%, 43%, 74% {
background-color:rgba(0,0,0,.2)
}
100%, 15%, 28%, 45%, 70% {
background-color:rgba(0,0,0,.9)
}
}
@-o-keyframes 
pulse { 0%, 13%, 30%, 43%, 74% {
background-color:rgba(0,0,0,.2)
}
100%, 15%, 28%, 45%, 70% {
background-color:rgba(0,0,0,.9)
}
}
@keyframes 
pulse { 0%, 13%, 30%, 43%, 74% {
background-color:rgba(0,0,0,.2)
}
100%, 15%, 28%, 45%, 70% {
background-color:rgba(0,0,0,.9)
}
}
@-webkit-keyframes 
borderPulse { 0% {
box-shadow:0 0 0 0 #000, 0 0 0 1px rgba(0,0,0,.8)
}
40% {
box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(221,187,0,.8)
}
80% {
box-shadow:0 0 0 3px #FFF, 0 0 1px 3px rgba(221,187,0,.8)
}
}
@-moz-keyframes 
borderPulse { 0% {
box-shadow:0 0 0 0 #000, 0 0 0 1px rgba(0,0,0,.8)
}
40% {
box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(221,187,0,.8)
}
80% {
box-shadow:0 0 0 3px #FFF, 0 0 1px 3px rgba(221,187,0,.8)
}
}
@-o-keyframes 
borderPulse { 0% {
box-shadow:0 0 0 0 #000, 0 0 0 1px rgba(0,0,0,.8)
}
40% {
box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(221,187,0,.8)
}
80% {
box-shadow:0 0 0 3px #FFF, 0 0 1px 3px rgba(221,187,0,.8)
}
}
@keyframes 
borderPulse { 0% {
box-shadow:0 0 0 0 #000, 0 0 0 1px rgba(0,0,0,.8)
}
40% {
box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(221,187,0,.8)
}
80% {
box-shadow:0 0 0 3px #FFF, 0 0 1px 3px rgba(221,187,0,.8)
}
}

#anchor, #div {
  padding: 20px;
  background: #111;
  display: flex
}

#anchor .img-container, #div .img-container {
  position: relative;
  width: 15%;
  height: 0;
  padding-bottom: 15%;
  overflow: hidden
}

#anchor .img-container img, #anchor .img-container span, #div .img-container img, #div .img-container span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover
}

#anchor .img-container span, #div .img-container span {
  color: #111;
  font-size: 40px;
  background: #ff0;
  text-align: center
}

#anchor { flex-direction: row-reverse }

#anchor .img-container img, #anchor .img-container span { filter: brightness(100%) }

#anchor .img-container img:hover, #anchor .img-container span:hover { filter: brightness(50%) }

#anchor .img-container span {
  background: red;
  color: #fff
}

#trigger-anchor, #trigger-div { cursor: pointer }

#background .bg {
  height: 300px;
  background: url(https://unsplash.it/1920/1280?image=611) center center no-repeat fixed;
  background-size: cover
}