Card hover effect – Bootstrap4

CSS Card hover effect – Bootstrap4

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</head>
<body>

<div class="contents bg-primary overflow-hidden">
  <div class="container d-flex justify-content-center align-items-center text-success h-100">
    <div class="section1 display-4 font-weight-bolder">
        <span style="--Mdelay : 1">c</span>
        <span style="--Mdelay : 2">s</span>
        <span style="--Mdelay : 3">s</span>
        <span style="--Mdelay : 4">C</span>
        <span style="--Mdelay : 5">u</span>
        <span style="--Mdelay : 6">s</span>
        <span style="--Mdelay : 7">t</span>
        <span style="--Mdelay : 8">o</span>
        <span style="--Mdelay : 9">m</span>
        <span style="--Mdelay : 10">P</span>
        <span style="--Mdelay : 11">r</span>
        <span style="--Mdelay : 12">o</span>
        <span style="--Mdelay : 13">p</span>
        <span style="--Mdelay : 14">e</span>
        <span style="--Mdelay : 15">r</span>
        <span style="--Mdelay : 16">t</span>
        <span style="--Mdelay : 17">i</span>
        <span style="--Mdelay : 18">e</span>
        <span style="--Mdelay : 19">s</span>
    </div>
  </div>
</div>    

<div class="contents bg-primary overflow-hidden">
  <div class="container d-flex justify-content-center align-items-center text-success h-100">
    <div class="section2 w-100 text-center">
      <h3 class="display-5 text-success Mreflect mb-5">Card hover effect - Bootstrap4</h3>
      <div class="row row-cols-md-4 row-cols-sm-2">
        <div class="p-1">
          <div class="card border-0">
            <img src="images/1.jpg" class="card-img-top" alt="...">
            <div class="card-body bg-primary">
              <h5 class="card-title">Card title</h5>
              <p class="card-text"><small class="text-muted">Lorem ipsum</small></p>
            </div>
            <div class="card-footer font-weight-bold">
              <p>Lorem ipsum</p>
            </div>
          </div>
        </div>
        <div class="p-1">
          <div class="card border-0">
            <img src="images/2.jpg" class="card-img-top" alt="...">
            <div class="card-body bg-primary">
              <h5 class="card-title">Card title</h5>
              <p class="card-text"><small class="text-muted">Lorem ipsum</small></p>
            </div>
            <div class="card-footer font-weight-bold">
              <p>Lorem ipsum</p>
            </div>
          </div>          
        </div>
        <div class="p-1">
          <div class="card border-0">
            <img src="images/3.jpg" class="card-img-top" alt="...">
            <div class="card-body bg-primary">
              <h5 class="card-title">Card title</h5>
              <p class="card-text"><small class="text-muted">Lorem ipsum</small></p>
            </div>
            <div class="card-footer font-weight-bold">
              <p>Lorem ipsum</p>
            </div>
          </div>          
        </div>
        <div class="p-1">
          <div class="card border-0">
            <img src="images/4.jpg" class="card-img-top" alt="...">
            <div class="card-body bg-primary">
              <h5 class="card-title">Card title</h5>
              <p class="card-text"><small class="text-muted">Lorem ipsum</small></p>
            </div>
            <div class="card-footer font-weight-bold">
              <p>Lorem ipsum</p>
            </div>
          </div>          
        </div>
      </div>
    </div>
  </div>
</div>    



</body>
</html>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

$font-family-base: 'Roboto', sans-serif;
$enable-responsive-font-sizes:                true;



$color-1:#0f4c81;
$color-2:#ed6663;
$color-3:#00ffff;
$color-4:#1b262c;
$color-5: #ff0000;


$primary: $color-1;
$secondary: $color-2;
$success: $color-3;
$warning: $color-4;
$danger: $color-5;


$dark:#333333;


// $enable-gradients : true;
/* 
$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;
 */

 $container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1200px
  );


@import "scss/bootstrap";

html{
    font-size: 17.24px;
    letter-spacing: -0.03em;
    word-spacing: 0.05em;
    //letter-spacing: -0.4em;
}

a{
    text-decoration: none !important;
}

.contents{
    height: 100vh;
    background: linear-gradient(to top, darken($primary, 20%), $primary);
    .section1{
        -webkit-box-reflect: below -10px linear-gradient(transparent, rgba(23,35,58,0.2));
        transform-style: preserve-3d;
        transform: perspective(600px) rotatex(0deg) rotateY(60deg);
        //margin-right: -200px;
        span{
            //position: relative;
    
                display: inline-block;
                //animation: ani1 2s ease-in-out infinite;
                animation: ani2 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;;
                animation-delay: calc(0.03s * var(--Mdelay));
        }
    }
    .section2{
        .card{
            overflow: hidden;
            cursor: pointer;
            img{
                transition: .5s ease-in-out;
                transform: scale(1.7);
            }
            .card-body{
                transition: .5s ease-in-out;
                transform: translateY(50px);
            }

            .card-footer{
                transition: .5s ease-in-out;
                background-color: lighten($color-1,20%);
            }

            &:hover {
                img{
                    transform: scale(1);
                }
                .card-body{
                    transform: translateY(0px);
                }
    
                .card-footer{
                    background-color: $color-3;
                    color: $color-1;
                }
            }
        }
    }
}

.Mreflect {
    -webkit-box-reflect: below -4px linear-gradient(transparent, rgba(255,255,255,0.2));
}


@keyframes ani1 {
    0%{
        transform: translateY(0px);
        
    }
    50%{
        transform: translateY(-40px) scale(1.4);
        filter: blur(4px) ;
    }
}


@keyframes ani2 {
    0%{
        transform: translate3d(0, 0, 0)
    }
    50%{
        transform: translate3d(20px, 0, 0) scale(1.6) rotateY(300deg);
        filter: blur(2px) ;
        color: $yellow;
        padding : 2px;
        
    }
}

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다