Example of using CSS to achieve floating effect when mouse moves over card

Example of using CSS to achieve floating effect when mouse moves over card

principle

Set a shadow on the element when hovering: box-shadow to make its style different from normal.

For box-shadow expressions, see MDN:

/* x offset | y offset | shadow color */
box-shadow: 60px -16px teal;

/* x offset | y offset | shadow blur radius | shadow color */
box-shadow: 10px 5px 5px black;

/* x offset | y offset | shadow blur radius | shadow spread radius | shadow color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* Insert (shadow inward) | x offset | y offset | shadow color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas*/
box-shadow: 3px 3px red, -1em 0 0.4em olive;

To specify a single box-shadow:

  • Given two, three, or four numeric values.

If only two values ​​are given, they will be interpreted by the browser as an offset on the x-axis and an offset on the y-axis.
If a third value is given, it is interpreted as the size of the blur radius.
If a fourth value is given, it is interpreted as the size of the expansion radius.

  • Optional, inset (shadow inward).
  • Optional, a color value.

The following are several styles that are used many times in this blog system.

1. Mouse hover to imitate the folded paper style

Code implementation:

The transition attribute is added to the hover state to produce a gradient effect.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mouse hover simulates the style of folded paper</title>
</head>
<style type="text/css">
  /* Core styles */
  .card {
    width: 300px;
    height: 180px;
    border: 10px solid #FFF;
    border-bottom: 0 none;
    background-color: #FFF;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .15)
  }

  .card:hover {
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .25);
    transition: all .2s ease-in-out;
  }

  /* Non-core styles */
  .card-header {
    text-align: center;
  }

  .card-body, .card-footer {
    text-align: left;
  }
</style>
<body style="background: #e3e3e3;">
<div class="card">
  <div class="card-header">
    <p>This is a card</p>
  </div>
  <div class="card-body">
    <p>Description: When the mouse is hovering, the effect is similar to the folding of paper</p>
  </div>
  <div class="card-footer">
    <p>Principle: Change the offset on the y-axis and the shadow diffusion radius (the second and third numbers)</p>
  </div>
</div>
</body>
</html>

2. Mouse hover imitating paper focus style

Code implementation:

The difference from the above is that the specific values ​​of box-shadow property (the offset on the y-axis and the shadow diffusion radius, that is, the second and third numbers) are adjusted.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mouse hover simulates paper focus style</title>
</head>
<style type="text/css">
  /* Core styles */
  .card {
    padding: 10px;
    width: 300px;
    height: 180px;
    background-color: #FFF;
    box-shadow: none;
  }

  .card:hover {
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .2);
    border-color: #eee;
    transition: all .2s ease-in-out;
  }

  /* Non-core styles */
  .card-header {
    text-align: center;
  }

  .card-body, .card-footer {
    text-align: left;
  }
</style>
<body style="background: #e3e3e3;">
<div class="card">
  <div class="card-header">
    <p>This is a card</p>
  </div>
  <div class="card-body">
    <p>Description: When the mouse is hovering, the whole paper is in focus</p>
  </div>
  <div class="card-footer">
    <p>Principle: Change the offset on the y-axis and the shadow diffusion radius (the second and third numbers)</p>
  </div>
</div>
</body>
</html>

3. Mouse hover imitates paper lifting style

Code implementation:

By combining box-shadow property and the transform property.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mouse hover simulates the style of paper lifting</title>
</head>
<style type="text/css">
  /* Core styles */
  .card {
    padding: 10px;
    width: 300px;
    height: 180px;
    background-color: #FFF;
    border: none;
    border-radius: 6px;
    -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
    transition: all 250ms cubic-bezier(.02, .01, .47, 1);
  }

  .card:hover {
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
    transform: translate(0,-5px);
    transition-delay: 0s !important;
  }

  .box-shadow {
    -webkit-box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.15);
    box-shadow: 0 4px 16px rgba(48, 55, 66, 0.15);
  }

  /* Non-core styles */
  .card-header {
    text-align: center;
  }

  .card-body, .card-footer {
    text-align: left;
  }
</style>
<body style="background: #e3e3e3;">
<div class="card box-shadow">
  <div class="card-header">
    <p>This is a card</p>
  </div>
  <div class="card-body">
    <p>Description: When the mouse is hovered, the whole paper is lifted</p>
  </div>
  <div class="card-footer">
    <p>Principle: Add transform attribute</p>
  </div>
</div>
</body>
</html>

4. Mouse hover imitates paper rising style (animation implementation)

Code implementation:

Use the @keyframes rule to create animations that gradually change one set of CSS styles to another.
Perform animations on hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>When the mouse hovers, it simulates the style of paper rising</title>
</head>
<style type="text/css">
  /* Core styles */
  .card {
    padding: 10px;
    width: 300px;
    height: 180px;
    background-color: #FFF;
    border: none;
    border-radius: 6px;
    -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
    transition: all 250ms cubic-bezier(.02, .01, .47, 1);
  }

  .card:hover {
    animation: fly 0.0001s linear;
    animation-fill-mode: both;
  }

  @keyframes fly {
    0% {
      box-shadow: 2px 2px 2px #e2dede, -2px 2px 2px #e2dede;
    }
    100% {
      box-shadow: 6px 8px 12px #e2dede, -6px 8px 12px #e2dede;
    }
  }

  /* Non-core styles */
  .card-header {
    text-align: center;
  }

  .card-body, .card-footer {
    text-align: left;
  }
</style>
<body style="background: #e3e3e3;">
<div class="card box-shadow">
  <div class="card-header">
    <p>This is a card</p>
  </div>
  <div class="card-body">
    <p>Description: When the mouse hovers, the whole paper rises</p>
  </div>
  <div class="card-footer">
    <p>How it works: Using the @keyframes rule to create animations</p>
  </div>
</div>
</body>
</html>

The above is the details of the example of how to use CSS to achieve the floating effect of cards when the mouse hovers over them. For more information about how to use CSS to achieve the floating effect of cards when the mouse hovers over them, please pay attention to other related articles on 123WORDPRESS.COM!

<<:  In-depth understanding of the life cycle comparison between Vue2 and Vue3

>>:  Common shell script commands and related knowledge under Linux

Recommend

Design Reference Beautiful and Original Blog Design

All blogs listed below are original and uniquely ...

Use iframe to display weather effects on web pages

CSS: Copy code The code is as follows: *{margin:0;...

The docker container directly runs to obtain the public IP operation through ping

Get the local public IP address through the conta...

Detailed process of decompressing and installing mysql5.7.17 zip

1. Download address https://dev.mysql.com/downloa...

CSS3 implements missing corner rectangle, folded corner rectangle and missing corner border

Preface A few days ago, I came across the feature...

Native js custom right-click menu

This article example shares the specific code of ...

About the garbled problem caused by HTML encoding

Today a junior student asked a question. The HTML...

Web page HTML code: production of scrolling text

In this section, the author describes the special...

Comparison of various ways to measure the performance of JavaScript functions

Table of contents Overview Performance.now Consol...

Solution to invalid margin-top of elements in div tags

Just as the title says. The question is very stran...

Insufficient memory problem and solution when docker starts elasticsearch

question Insufficient memory when docker installs...

HTML Table Tag Tutorial (47): Nested Tables

<br />In the page, typesetting is achieved b...

Installation and deployment tutorial of the latest MySQL version 5.7.17 (64bit ZIP green version) under Win 8 or above

First of all, the blogger is playing the communit...

Tomcat reports an error when starting the springboot project war package: Error when starting the child

Today, the company's springboot project is re...

Detailed explanation of tcpdump command examples in Linux

Preface To put it simply, tcpdump is a packet ana...