50 Div & Section Effects

.div-1:hover { height: 100px; }\n.div-1 { height: 50px; transition: height 0.3s; overflow: hidden; background: #3b82f6; color: #fff; display: flex; align-items: center; justify-content: center; }

.div-2:hover { filter: blur(0); }\n.div-2 { filter: blur(5px); transition: filter 0.3s; background: #ef4444; color: #fff; }

.div-3:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }\n.div-3 { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); transition: transform 0.3s, box-shadow 0.3s; background: #facc15; color: #000; }

.div-4:hover { grid-template-columns: 2fr 1fr; }\n.div-4 { display: grid; grid-template-columns: 1fr 1fr; transition: grid-template-columns 0.3s; background: #3b82f6; color: #fff; }

.div-5:hover { transform: scale(1.1); animation: elastic 0.5s; }\n@keyframes elastic { 50% { transform: scale(0.9); } }\n.div-5 { transition: transform 0.3s; background: #ef4444; color: #fff; }

.div-6.scrolled { opacity: 1; transform: translateY(0); }\n.div-6 { opacity: 0; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s; background: #facc15; color: #000; }\n/* Use JS to add 'scrolled' class */

.div-7 { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; }\n.div-7:hover { background: rgba(255, 255, 255, 0.3); }

.div-8:hover { border-radius: 20px; }\n.div-8 { transition: border-radius 0.3s; background: #3b82f6; color: #fff; }

.div-9:hover { transform: translateZ(20px); }\n.div-9 { transition: transform 0.3s; perspective: 100px; background: #ef4444; color: #fff; }

.div-10:hover { animation: jelly 0.5s; }\n@keyframes jelly { 25% { transform: scale(1.2, 0.8); } 75% { transform: scale(0.8, 1.2); } }\n.div-10 { background: #facc15; color: #000; }

.div-11:hover { box-shadow: 0 0 15px #facc15; }\n.div-11 { transition: box-shadow 0.3s; background: #3b82f6; color: #fff; }

.div-12 { position: relative; background: #ef4444; color: #fff; }\n.div-12:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); transform: translateZ(-10px); }\n.div-12:hover { transform: translateZ(10px); }\n.div-12 { perspective: 100px; transition: transform 0.3s; }

.div-13:hover { box-shadow: 0 0 15px #ef4444; border: 2px solid #ef4444; }\n.div-13 { transition: box-shadow 0.3s, border 0.3s; background: #3b82f6; color: #fff; }

.div-14:hover { opacity: 1; }\n.div-14 { opacity: 0.5; transition: opacity 0.3s; background: #facc15; color: #000; }

.div-15 { position: relative; overflow: hidden; background: #3b82f6; color: #fff; }\n.div-15:after { content: ''; position: absolute; width: 0; height: 0; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); }\n.div-15.clicked:after { animation: ripple 0.5s; }\n@keyframes ripple { to { width: 200px; height: 200px; opacity: 0; } }\n/* Use JS for click event */

.div-16:hover { transform: skewX(10deg); }\n.div-16 { transition: transform 0.3s; background: #ef4444; color: #fff; }

.div-17 { position: relative; overflow: hidden; background: #facc15; color: #000; }\n.div-17:after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: #3b82f6; transition: transform 0.3s; }\n.div-17:hover:after { transform: translateX(-100%); }

.div-18 { position: relative; background: #3b82f6; color: #fff; }\n.div-18:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: #ef4444; clip-path: polygon(0 0, 10% 100%, 20% 0, 30% 100%, 40% 0, 100% 0); }

.div-19:hover { transform: scale(1.1); }\n.div-19 { transition: transform 0.3s; background: #facc15; color: #000; }

.div-20:hover { z-index: 10; transform: rotateY(180deg); }\n.div-20 { transition: transform 0.3s, z-index 0.3s; background: #3b82f6; color: #fff; }

.div-21:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }\n.div-21 { transition: transform 0.3s, box-shadow 0.3s; background: #ef4444; color: #fff; }

.div-22 { clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%); }\n.div-22:hover { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }\n.div-22 { transition: clip-path 0.3s; background: #facc15; color: #000; }

.div-23 { mask: url(#circle-mask); background: #3b82f6; color: #fff; }\n.div-23:hover { mask: none; }\n/* SVG: <svg><mask id='circle-mask'><circle cx='50%' cy='50%' r='50' fill='white'/></mask></svg> */

.div-24:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); }\n.div-24 { transition: box-shadow 0.3s; background: #ef4444; color: #fff; }

.div-25 { background: url('https://www.transparenttextures.com/patterns/canvas.png'), #3b82f6; color: #fff; }\n.div-25:hover { background: url('https://www.transparenttextures.com/patterns/canvas.png'), #facc15; }

.div-26:hover { transform: rotateX(10deg); }\n.div-26 { transition: transform 0.3s; perspective: 200px; background: #facc15; color: #000; }

.div-27 { position: relative; background: #3b82f6; color: #fff; }\n.div-27:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(239, 68, 68, 0.5), transparent); opacity: 0; transition: opacity 0.3s; }\n.div-27:hover:after { opacity: 1; }

.div-28:hover { transform: translate(5px, -5px); }\n.div-28 { transition: transform 0.3s; background: #ef4444; color: #fff; }

.div-29:hover { background: radial-gradient(circle, #facc15, #3b82f6); }\n.div-29 { background: #3b82f6; color: #fff; transition: background 0.3s; }

.div-30:hover { filter: url(#chromatic); }\n.div-30 { background: #facc15; color: #000; }\n/* SVG: <svg><filter id='chromatic'><feOffset in='SourceGraphic' dx='2' result='red'/><feOffset in='SourceGraphic' dy='2' result='blue'/><feBlend in='red' in2='blue' mode='screen'/></filter></svg> */

.div-31:hover { box-shadow: 0 0 20px #8b5cf6; }\n.div-31 { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; transition: box-shadow 0.3s; }

.div-32:hover { animation: bounce 0.5s; }\n@keyframes bounce { 50% { transform: translateY(-10px); } }\n.div-32 { background: #3b82f6; color: #fff; }

.div-33 { position: relative; overflow: hidden; background: #ef4444; color: #fff; }\n.div-33:after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: #facc15; transition: top 0.3s; }\n.div-33:hover:after { top: 0; }

.div-34:hover { transform: scale(1.1); animation: elastic 0.5s; }\n@keyframes elastic { 50% { transform: scale(0.9); } }\n.div-34 { transition: transform 0.3s; background: #facc15; color: #000; }

.div-35:hover { background: #ef4444; color: #fff; }\n.div-35 { background: #3b82f6; color: #fff; transition: background 0.3s, color 0.3s; }

.div-36 { position: relative; background: #3b82f6; color: #fff; }\n.div-36:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="2" fill="white" opacity="0.5"/></svg>') repeat; animation: particle 5s infinite; }\n@keyframes particle { 0% { background-position: 0 0; } 100% { background-position: 20px 20px; } }

.div-37 { background: url('https://www.transparenttextures.com/patterns/noise.png'), #ef4444; color: #fff; }\n.div-37:hover { background: url('https://www.transparenttextures.com/patterns/noise.png'), #facc15; }

.div-38 { position: relative; color: #fff; }\n.div-38 video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }\n.div-38:hover video { filter: brightness(1.2); }\n/* HTML: <video autoplay muted loop><source src="https://pexels.com/video/sample.mp4"></video> */

.div-39.scrolled { transform: translateY(-20px); }\n.div-39 { position: relative; background: #3b82f6; color: #fff; transition: transform 0.3s; }\n.div-39:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); transform: translateZ(-10px); }\n.div-39 { perspective: 100px; }\n/* Use JS for scroll event */

.div-40:hover { clip-path: circle(50% at 50% 50%); }\n.div-40 { clip-path: circle(30% at 50% 50%); transition: clip-path 0.3s; background: #ef4444; color: #fff; }

.div-41:hover { grid-template-columns: 3fr 1fr; }\n.div-41 { display: grid; grid-template-columns: 1fr 1fr; transition: grid-template-columns 0.3s; background: #facc15; color: #000; }

.div-42 svg path { stroke-dasharray: 100; stroke-dashoffset: 100; }\n.div-42:hover svg path { stroke-dashoffset: 0; }\n.div-42 { background: #3b82f6; color: #fff; }\n/* SVG: <svg><path d='M10,10 L90,90' stroke='white' stroke-width='2'/></svg> */

.div-43 { position: relative; background: url('https://picsum.photos/200/100'); }\n.div-43:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://picsum.photos/200/100?grayscale'); opacity: 0; transition: opacity 0.3s; }\n.div-43:hover:after { opacity: 1; }

.div-44:hover { border: 2px dashed #ef4444; }\n.div-44 { border: 2px solid #3b82f6; transition: border 0.3s; background: #facc15; color: #000; }

.div-45:hover { box-shadow: 0 0 20px #ef4444; }\n.div-45 { transition: box-shadow 0.3s; background: #3b82f6; color: #fff; }

.div-46:hover { filter: hue-rotate(90deg); }\n.div-46 { background: linear-gradient(45deg, #0000ff, #ff0000); color: #fff; transition: filter 0.3s; }

.div-47:hover { transform: scaleX(-1); }\n.div-47 { transition: transform 0.3s; background: #facc15; color: #000; }

.div-48 { position: relative; background: #3b82f6; color: #fff; }\n.div-48:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(transparent, transparent 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.2) 4px); animation: scanline 2s infinite; }\n@keyframes scanline { 0% { transform: translateY(0); } 100% { transform: translateY(4px); } }

.div-49 { position: relative; background: #ef4444; color: #fff; }\n.div-49:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5); }

.div-50 { position: relative; background: #3b82f6; color: #fff; }\n.div-50 canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }\n.div-50:hover canvas { opacity: 1; }\n.div-50 canvas { opacity: 0; transition: opacity 0.3s; }\n/* Use JS for canvas animation */