SCSS

by maya tominaga

HTML

<div class="main">
  <article class="archive-list">
    <div class="eye-catch">
      <a>
        <img src="http://placehold.jp/200x180.png">
      </a>
      <span class="type-name">サンプル</span>
    </div>
  </article>
  <article class="archive-list">
    <div class="eye-catch">
      <a>
        <img src="http://placehold.jp/200x180.png">
      </a>
      <span class="type-name">サンプル</span>
    </div>
  </article>
  <article class="archive-list">
    <div class="eye-catch">
      <a>
        <img src="http://placehold.jp/200x180.png">
      </a>
      <span class="type-name">サンプル</span>
    </div>
  </article>
  <article class="archive-list">
    <div class="eye-catch">
      <a>
        <img src="http://placehold.jp/200x180.png">
      </a>
      <span class="type-name">サンプル</span>
    </div>
  </article>
  <article class="archive-list">
    <div class="eye-catch">
      <a>
        <img src="http://placehold.jp/200x180.png">
      </a>
      <span class="type-name">サンプル</span>
    </div>
  </article>
  <article class="archive-list">
    <div class="eye-catch">
      <a>
        <img src="http://placehold.jp/200x180.png">
      </a>
      <span class="type-name">サンプル</span>
    </div>
  </article>
</div>
<div class="nav-link">

</div>

SCSS

body {
  background: #fff;
  padding: 10px;
  font-family: Helvetica;
}

.archive-list {
  margin: 0 3% 20px 0;
  width: 25%;
  height: 35vw;
  display: inline-block;
  border: 1px solid #e2e5e8;
}

.eye-catch {
  position: relative;

  img {
    max-width: 100%;
  }
}

.type-name {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px;
  font-size: 14px;
}