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

Detailed analysis of the blocking problem of js and css

Table of contents DOMContentLoaded and load What ...

MySQL 8.0.15 version installation tutorial connect to Navicat.list

The pitfalls 1. Many tutorials on the Internet wr...

Win2008 R2 mysql 5.5 zip format mysql installation and configuration

Win2008 R2 zip format mysql installation and conf...

Creating Responsive Emails with Vue.js and MJML

MJML is a modern email tool that enables develope...

15 Vim quick reference tables to help you increase your efficiency by N times

I started using Linux for development and enterta...

MySQL practical skills: analysis of methods to compare whether two tables have different data

This article uses an example to describe how MySQ...

A brief discussion on the principle of React two-way data binding

Table of contents What is two-way data binding Im...

Description of meta viewport attribute in HTML web page

HTML meta viewport attribute description What is ...

Detailed explanation of the reasons and solutions for Docker failing to start normally

1. Abnormal performance of Docker startup: 1. The...

Summary of SQL query optimization knowledge points for MySQL tens of millions of big data

1. To optimize the query, try to avoid full table...

Sample code for implementing login and registration template in Vue

Template 1: login.vue <template> <p clas...

Deploy Nginx+Flask+Mongo application using Docker

Nginx is used as the server, Mongo is used as the...

JavaScript Advanced Programming: Variables and Scope

Table of contents 1. Original value and reference...

Analyze the compilation and burning of Linux kernel and device tree

Table of contents 1. Prepare materials 2. Downloa...

JS implements Baidu search box

This article example shares the specific code of ...