コンポーネント集

カード08 

<a class="card-08" href="#">
    <p class="card-08__date">2021.1.1</p>
    <div class="card-08__img"><img src="https://picsum.photos/400/200" width="400" height="200" alt="" /></div>
    <h3 class="card-08__title">CARD08</h3>
    <p class="card-08__link"><span>READ</span></p>
</a>
 
a.card-08(href=link)
  p.card-08__date #{ date }
  .card-08__img
    img(src=img, width=width, height=height, alt='')
  h3.card-08__title #{ title }
  p.card-08__link
    span READ
 
{
  "link": "#",
  "date": "2021.1.1",
  "img": "https://picsum.photos/400/200",
  "width": 400,
  "height": 200,
  "title": "CARD08"
}
  • Content: 
    $BLOCK_NAME: '.card-08';

// 変数
$color_overlay: #000;
$color_black: #000;
$easing_default: cubic-bezier(0.215, 0.61, 0.355, 1);

#{ $BLOCK_NAME } {
  display: block;
  max-width: 360px;

  &__date {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-style: italic;
    line-height: 1;
  }

  &__img {
    position: relative;
    margin-top: 10px;
    overflow: hidden;
    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      content: '';
      background: $color_overlay;
      opacity: 0;
      transition: opacity 0.45s ease;
      @at-root #{ $BLOCK_NAME }:hover & {
        opacity: 0.4;
      }
    }
    & > img {
      transition: transform 10s linear;
      @at-root #{ $BLOCK_NAME }:hover & {
        transform: scale(1.1) rotate(2.8deg);
      }
    }
  }

  &__title {
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    margin-top: 7px;
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    &::after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      content: '';
      background: $color_black;
      transition: transform 0.35s $easing_default;
      transform: scaleX(1);
      transform-origin: left;
      @at-root #{ $BLOCK_NAME }:hover & {
        transform: scaleX(0);
        transform-origin: right;
      }
    }
  }

  &__link {
    margin-top: 6px;
    & > span {
      position: relative;
      display: inline-block;
      padding-right: 18px;
      font-family: 'Lato', sans-serif;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0.1em;
      transition: transform 0.45s $easing_default;
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        display: block;
        width: 10px;
        height: 1px;
        margin: auto;
        content: '';
        background: $color_black;
      }
      @at-root #{ $BLOCK_NAME }:hover & {
        transform: translateX(10px);
      }
    }
  }
}
  • URL: /components/raw/card08/card08.scss
  • Filesystem Path: src/components/cards/1_20/card08/card08.scss
  • Size: 2.2 KB