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/css2?family=Bebas+Neue&amp;family=Figtree:wght@300;600&amp;display=swap'>

    <style>
        article {
            margin-top: 100px;
          --img-scale: 1.001;
          --title-color: black;
          --link-icon-translate: -20px;
          --link-icon-opacity: 0;
          position: relative;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: none;
          background: #fff;
          transform-origin: center center;
          transition: all 0.4s ease-in-out;
        }
        
        article img {
          transform-origin: center;
          transform: scale(var(--img-scale));
          transition: transform 0.4s ease-in-out;
        }
        
        article:has(a:hover, a:focus-within) {
          --img-scale: 1.1;
          --title-color: #28666e;
          --link-icon-translate: 0;
          --link-icon-opacity: 1;
          box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24p.........完整代码请登录后点击上方下载按钮下载查看