tailwindcss实现图文卡片悬浮放大效果代码
代码语言:html
所属分类:悬停
代码描述:tailwindcss实现图文卡片悬浮放大效果代码
代码标签: 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> &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0