Card hover effect ep04 – Bootstrap4

Card hover effect ep04 – Bootstrap4

html

<div class="contents bg-primary overflow-hidden">
  <div class="container d-flex justify-content-center align-items-center h-100">
    <div class="section5 w-100 text-center">
      <h3 class="display-5 text-success Mreflect mb-5">[S5]Card hover effect - Bootstrap4</h3>
      <div class="row row-cols-md-4 row-cols-sm-2 ">

        <div class="p-2">
          <div class="card border-0">
            <img src="images/a1.jpg" class="card-img-top" alt="...">
            <div class="card-body w-100">
              <h5 class="card-title font-weight-bold ">Card title</h5>
              <p class="card-text"><small class="">Lorem ipsum</small></p>
            </div>
            <div class="card-footer">
              Lorem ipsum
            </div>
          </div>
        </div>

        <div class="p-2">
          <div class="card border-0">
            <img src="images/a2.jpg" class="card-img-top" alt="...">
            <div class="card-body w-100">
              <h5 class="card-title font-weight-bold ">Card title</h5>
              <p class="card-text"><small class="">Lorem ipsum</small></p>
            </div>
            <div class="card-footer">
              Lorem ipsum
            </div>
          </div>
        </div>

        <div class="p-2">
          <div class="card border-0">
            <img src="images/a3.jpg" class="card-img-top" alt="...">
            <div class="card-body w-100">
              <h5 class="card-title font-weight-bold ">Card title</h5>
              <p class="card-text"><small class="">Lorem ipsum</small></p>
            </div>
            <div class="card-footer">
              Lorem ipsum
            </div>
          </div>
        </div>

        <div class="p-2">
          <div class="card border-0">
            <img src="images/a4.jpg" class="card-img-top" alt="...">
            <div class="card-body w-100">
              <h5 class="card-title font-weight-bold ">Card title</h5>
              <p class="card-text"><small class="">Lorem ipsum</small></p>
            </div>
            <div class="card-footer">
              Lorem ipsum
            </div>
          </div>
        </div>






      </div>
    </div>
  </div>
</div> 

scss

.contents{
    height: 100vh;
    background: linear-gradient(to top, darken($primary, 20%), $primary);
    .section5{
        padding-left: 10px;
        .card{
            overflow: hidden;
            cursor: pointer;
            transition: .5s ease-in-out;
            transform: perspective(3em) rotateY(2deg);
            .card-body{
                transition: .5s ease-in-out;
                &::after{
                    transition: .5s ease-in-out;
                    content: "Go";
                    font-weight: bold;
                    color: $white;
                    background-color: $color-2;
                    position: absolute;
                    width: 50px;
                    height: 50px;
                    bottom: 28px;
                    right: -100px;
                    border-radius: 50%;
                    padding-top: 10px;
                }
            }

            &:hover{
                
                transform: perspective(0) rotateY(0) translateX(-10px);
                .card-body{
                    background-color: $color-1;
                    color: $white;

                    &::after{
                        right: 10px;
                    }

                }
            }
        }
    }

}

Bootstrap4 theming ep01

Bootstrap4 theming ep02