Fancy Cards with Hover Effects in HTML & CSS | Modern UI Card Design

In this tutorial, you’ll learn how to create fancy cards with smooth hover effects using pure HTML and CSS. We’ll design modern, interactive UI cards with transitions, shadows, and animations that are perfect for portfolios, landing pages, and websites.

✨ What you’ll learn in this video:
✔ Fancy card layout using HTML
✔ Hover animations with CSS transitions
✔ Modern UI/UX card design
✔ Clean and responsive styling
✔ Beginner-friendly code explanation

This project is ideal for web developers, UI designers, and beginners who want to improve their frontend design skills using HTML & CSS only.

👉 Don’t forget to like 👍, share 🔁, and subscribe 🔔 for more frontend UI tutorials!

HTML:

Create a HTML file and add the following code:

<div class="wrapper">
	<div>
		<img src="https://placehold.co/1200x1200/red/white?text=1&font=lato" />
	</div>
	<div>
		<img src="https://placehold.co/1200x1200/green/white?text=2&font=lora" />
	</div>
	<div>
		<img src="https://placehold.co/1200x1200/yellow/white?text=3&font=montserrat" />
	</div>
	<div>
		<img src="https://placehold.co/1200x1200/orange/white?text=4&font=noto-sans" />
	</div>
	<div>
		<img src="https://placehold.co/1200x1200/yellow/white?text=3&font=oswald" />
	</div>
	<div>
		<img src="https://placehold.co/1200x1200/green/white?text=2&font=roboto" />
	</div>
	<div>
		<img src="https://placehold.co/1200x1200/red/white?text=1&font=poppins" />
	</div>
</div>

CSS:

Create a CSS file and add the following code:

@import url(https://fonts.bunny.net/css?family=crushed:400);
	@layer base, demo;
	@layer demo {
	  	body{
	    	font-family: 'Crushed', display;
	  	}
		.wrapper {
  			--card-trans-duration: 1000ms;
  			--card-trans-easing:linear(0, 0.01 0.8%, 0.038 1.6%, 0.154 3.4%, 0.781 9.7%, 1.01 12.5%, 1.089 13.8%, 1.153 15.2%, 1.195 16.6%, 1.219 18%, 1.224 19.7%, 1.208 21.6%, 1.172 23.6%, 1.057 28.6%, 1.007 31.2%, 0.969 34.1%, 0.951 37.1%, 0.953 40.9%, 0.998 50.4%, 1.011 56%, 0.998 74.7%, 1);
  			--card-border-radius: 10px;
  			--card-width: 20vmin;
  			--radius: 50vmin; 
  			--cards: sibling-count();
		  	@supports not (order:sibling-index()) {
		    	--cards: 7;
		  	}
    		--arc-size: 0.25;
    		--arc-center: 0.75;
    		--arc-start: calc(var(--arc-center) - var(--arc-size) / 2);
    		--arc-shift: 0;
    		--arc-shift-delta: 0.01;
  			position: relative;
  			width: var(--card-width);
  			aspect-ratio:4/6;
 			& > div {
   				--card-i: sibling-index();
			   	@supports not (order:sibling-index()) {
			     	&:nth-child(1){--card-i:1}
			     	&:nth-child(2){--card-i:2}
			     	&:nth-child(3){--card-i:3}
			     	&:nth-child(4){--card-i:4}
			     	&:nth-child(5){--card-i:5}
			     	&:nth-child(6){--card-i:6}
			     	&:nth-child(7){--card-i:7}
			   	}
   				--arc-step: calc(var(--arc-size) / (var(--cards) - 1));
				position: absolute;
				width: var(--card-width);
				aspect-ratio:4/6;
				background: white;
				border-radius: var(--card-border-radius);
				offset-path: circle(var(--radius) at 50% 100%);
				offset-distance: calc(
					(var(--arc-start)
					 	+ (var(--card-i) - 1) * var(--arc-step)
					 	+ var(--arc-shift)
					) * 100%
				);
				offset-rotate: auto;
				offset-anchor:50% 0%;
				transition: all var(--card-trans-duration) var(--card-trans-easing);
				&:where(:nth-child(1),:nth-child(7)){
					z-index: 0;
				}
			    &:where(:nth-child(2),:nth-child(6)){
			     	z-index: 1;
			   	}
			    &:where(:nth-child(3),:nth-child(5)){
			     	z-index: 3;
			   	}
			    &:nth-child(4){
			     	z-index: 4;
			   	}
			   	&:hover{
			     	offset-anchor: 50% 10%;
			     	& + div{
			      		--arc-shift: calc(var(--arc-shift-delta) * 3);  
			 		}
					& + div + div{
			      		--arc-shift: calc(var(--arc-shift-delta) * 2);   
			     	}
			     	& + div + div + div{
			      		--arc-shift: calc(var(--arc-shift-delta) * 1);    
			     	}
			    }
			    &:has(+*:hover){
			    	--arc-shift: calc(var(--arc-shift-delta) * -3);    
			    }
			    &:has(+*+*:hover){
			      	--arc-shift: calc(var(--arc-shift-delta) * -2);    
			    }
			    &:has(+*+*+*:hover){
			      	--arc-shift: calc(var(--arc-shift-delta) * -1);   
			    }
			    & > img{
		      		width: 100%;
		      		height: 100%;
		      		object-fit: cover;
		      		display: block;
		      		border-radius: inherit;
			    } 
  			}
		}

		@layer base {
			* {
				box-sizing: border-box;
			}
			:root {
				color-scheme: light dark;
				--bg-dark: rgb(16, 24, 40);
				--bg-light: rgb(248, 244, 238);
				--txt-light: rgb(10, 10, 10);
				--txt-dark: rgb(245, 245, 245);
				--line-light: rgba(0 0 0 / .25);
				--line-dark: rgba(255 255 255 / .25);
			    --clr-bg: light-dark(var(--bg-light), var(--bg-dark));
			    --clr-txt: light-dark(var(--txt-light), var(--txt-dark));
			    --clr-lines: light-dark(var(--line-light), var(--line-dark));
			}
			body {
				background-color: var(--clr-bg);
				color: var(--clr-txt);
				min-height: 100svh;
				margin: 0;
				padding: 2rem;
				font-family: "Jura", sans-serif;
				font-size: 1rem;
				line-height: 1.5;
			    display: grid;
			    place-items: center;
			    gap: 2rem;
			}
		}
	}

html #css #hovereffects #carddesign #uidesign #webdesign #frontend #cssanimation #htmlcss #webdevelopment

Happy coding!