"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", figure: "figure", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {Link} = _components; if (!Link) _missingMdxReference("Link", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "The animation only works on devices that support hover(hoverOnlyWhenSupported)." }), "\n", _jsx(_components.p, { children: "Here is a preview of the component:" }), "\n", _jsx("div", { className: "p-4 bg-gray-100 rounded-lg", children: _jsxs("div", { className: "relative mx-auto h-full p-1 overflow-hidden border rounded-2xl group", style: { maxWidth: "24rem" }, children: [_jsxs("div", { className: "relative mx-auto overflow-hidden h-80 md:h-[25rem] w-[20rem] rounded-xl bg-gradient-to-r from-indigo-500 to-rose-300", children: [_jsx("div", { className: "relative p-5 mx-auto overflow-hidden rounded-lg mt-7 w-72 md:w-80 h-96", children: _jsx("img", { src: "/static/thumbnail-shopcart.jpg", alt: "Shopcart Project Demo", className: "object-cover object-top bg-gray-100 rounded-t-2xl", loading: "lazy" }) }), _jsxs("div", { className: "h-full group", children: [_jsx("div", { className: "absolute inset-0 transition-transform duration-200 transform translate-y-full bg-black/50 group-hover:translate-y-0" }), _jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center transition-opacity opacity-0 duration-250 group-hover:opacity-100", children: [_jsx("h3", { className: "ml-1 text-lg font-bold text-white", children: _jsx(_components.p, { children: "Shopcart Website" }) }), _jsx("p", { className: "text-white", children: "September 2023" })] })] })] }), _jsx(Link, { href: "", className: "absolute inset-0", children: "" })] }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-light": "#24292e", "--shiki-dark": "#e1e4e8", "--shiki-light-bg": "#fff", "--shiki-dark-bg": "#24292e" }, tabIndex: "0", "data-language": "jsx", "data-theme": "github-light github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-light github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"relative w-full h-full p-1 overflow-hidden border rounded-2xl group\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "div" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"relative overflow-hidden h-80 md:h-[25rem] rounded-xl bg-gradient-to-r from-rose-100 via-emerald-600 to-emerald-500\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " >" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"relative p-5 mx-auto overflow-hidden rounded-lg mt-7 w-72 md:w-80 h-96\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "img" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " src" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"/static/thumbnail-shopcart.jpg\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " alt" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"Shopcart Project Demo\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"object-cover object-top bg-gray-100 rounded-t-2xl\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " loading" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"lazy\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " />" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"h-full group\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"absolute inset-0 transition-transform duration-200 transform translate-y-full bg-black/50 group-hover:translate-y-0\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"absolute inset-0 flex flex-col items-center justify-center transition-opacity opacity-0 duration-250 group-hover:opacity-100\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "h3" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"ml-1 text-lg font-bold text-white\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " Shopcart Website" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"text-white\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">September 2023" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#79B8FF" }, children: "Link" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " href" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"\"" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"absolute inset-0\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: "" })] })] }) }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

TailwindCSS Card with Hover Effect