tailwindcss实现图文卡片悬浮放大效果代码-html代码-BFW代码库

tailwindcss实现图文卡片悬浮放大效果代码

代码语言：html

所属分类：悬停

代码描述：tailwindcss实现图文卡片悬浮放大效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.0.css">
  



</head>

<body>
  <main class="grid justify-center items-center min-h-screen p-8 bg-slate-700">
  <div class="
    group
    inline-block pb-4 bg-gradient-to-tr from-purple-600 to-orange-400 text-white overflow-hidden rounded-2xl shadow
    hover:shadow-md
    transition
  ">
    <figure class="max-h-64 aspect-square overflow-hidden">
      <img 
           class="w-full h-full object-cover transition group-hover:scale-125"
           src="//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90"
       />
    </figure>
    &.........完整代码请登录后点击上方下载按钮下载查看