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

Summary of the knowledge of embedding instructions that Vue engineers must encapsulate

Table of contents Preface Instruction Basics Hook...

Summary of 6 skills needed to master web page production

It has to be said that a web designer is a general...

Detailed tutorial on docker-compose deployment and configuration of Jenkins

Docker-compose deployment configuration jenkins 1...

Install MySQL5.5 database in CentOS7 environment

Table of contents 1. Check whether MySQL has been...

Detailed explanation of CSS BEM writing standards

BEM is a component-based approach to web developm...

A simple and in-depth study of async and await in JavaScript

Table of contents 1. Introduction 2. Detailed exp...

Solution to forgetting MySQL root password in MACOS

MySQL is a relational database management system ...

The iframe refresh method is more convenient

How to refresh iframe 1. To refresh, you can use j...

How to install Odoo12 development environment on Windows 10

Preface Since many friends say they don’t have Ma...

Instructions for using the --rm option of docker run

When the Docker container exits, the file system ...

A good way to improve your design skills

So-called talent (left brain and right brain) Tha...

How to set mysql5.7 encoding set to utf8mb4

I recently encountered a problem. The emoticons o...

Detailed explanation of basic syntax and data types of JavaScript

Table of contents Importing JavaScript 1. Interna...

How to write a picture as a background and a link (background picture plus link)

The picture is used as the background and the lin...

Node connects to MySQL and encapsulates its implementation code for adding, deleting, modifying and checking

Table of contents Node connects to Mysql Install ...