css实现自适应带阴影悬浮背景图文卡片效果代码-html代码-BFW代码库

css实现自适应带阴影悬浮背景图文卡片效果代码

代码语言：html

所属分类：响应式

代码描述：css实现自适应带阴影悬浮背景图文卡片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">




    <style>
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
        html {
          background-color: #f0f0f0;
        }
        body {
          color: #999999;
          font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
          font-style: normal;
          font-weight: 400;
          letter-spacing: 0;
          padding: 1rem;
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          -moz-font-feature-settings: "liga" on;
        }
        img {
          height: auto;
          max-width: 100%;
          vertical-align: middle;
        }
        .btn {
          background-color: white;
          border: 1px solid #cccccc;
          color: #696969;
          padding: 0.5rem;
          text-transform: lowercase;
        }
        .btn--block {
          display: block;
          width: 100%;
        }
        .cards {
          display: flex;
          flex-wrap: wrap;
          list-style: none;
          margin: 0;
          padding: 0;
        }
        .cards__item {
          display: flex;
          padding: 1rem;
        }
        @media (min-width: 40rem) {
          .cards__item {
            width: 50%;
          }
        }
        @media (min-width: 56rem) {
          .cards__item {
            width: 33.3333%;
          }
        }
        .card {
          background-color: white;
          border-radius: 0.25rem;
          box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }
        .card:hover .card__image {
          filter: contrast(100%);
        }
        .card__content {
          display: flex;
          flex: 1 1 auto;
          flex-direction: column;
          padding: 1rem;
        }
        .card__image {
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
          border-top-left-radius: 0.25rem;
          border-top-right-radius: 0.25rem;
          filter: contrast(70%);
          overflow: hidden;
          position: relative;
          transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
        }
        .card__image::before {
          content: "";
          display: block;
          padding-top: 56.25%;
        }
        @media (min-width: 40rem) {
          .card__image::before {
            padding-top: 66.6%;
          }
        }
        .card__image--flowers {
          background-image: url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png);
        }
        .card__image--river {
          background-image: url(//repo.bfw.wiki/bfwrepo/image/5e62ef41353c3.png);
        }
        .card__image--record {
          background-image: url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png);
        }
        .card__image--fence {
          background-image: url(//repo.bfw.wiki/bfwrepo/image/5e62efa9e6df8.png);
        }
        .card__title {
          color:.........完整代码请登录后点击上方下载按钮下载查看