<div class="cont">

  <figure class="element">
    <img class="element__image" src="http://ewigkeit.ucoz.club/EVANGELION/userpic-1.jpg" alt="picture" />

  </figure>

  <figure class="element">
    <img class="element__image" src="http://ewigkeit.ucoz.club/filterImage/poster-50.jpg" alt="picture" />

  </figure>

  <figure class="element">
    <img class="element__image" src="http://ewigkeit.ucoz.club/filterImage/umageBack.jpg" alt="picture" />

  </figure>

</div>
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto Condensed", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: #252525;
  margin: 0;
}

.cont {
  width: 100%;
  max-width: 1300px;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 40px;
}

.element {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #fff;
  height: 350px;
}

.element__image {
  max-width: 100%;
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.