✨ Hover Effects Gallery

/* =================================== BASIC TRANSITION SYNTAX =================================== */ .element { transition: property duration timing-function delay; } /* Examples */ .element { transition: all 0.3s ease; /* Most common */ transition: transform 0.5s ease-out; /* Only transform */ transition: background 0.2s linear; /* Only background */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Custom curve */ } /* =================================== TRANSFORM PROPERTIES =================================== */ .scale:hover { transform: scale(1.1); } /* Grow/shrink */ .rotate:hover { transform: rotate(10deg); } /* Rotate */ .lift:hover { transform: translateY(-10px); } /* Move up/down */ .skew:hover { transform: skew(-5deg); } /* Skew/slant */ /* =================================== COMBINING TRANSFORMS =================================== */ .combined:hover { transform: translateY(-10px) scale(1.05) rotate(2deg); } /* =================================== TRANSITION TIMING FUNCTIONS =================================== */ /* ease = slow start, fast middle, slow end (default) */ /* linear = same speed throughout */ /* ease-in = slow start */ /* ease-out = slow end */ /* cubic-bezier() = custom curve */

/* Pattern 1: Card that lifts on hover */ .card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); } /* Pattern 2: Button that changes color */ .button { transition: background 0.3s ease, transform 0.2s ease; } .button:hover { background: #dark-color; transform: translateY(-2px); } /* Pattern 3: Image that zooms inside container */ .image-container { overflow: hidden; } .image-container img { transition: transform 0.4s ease; } .image-container:hover img { transform: scale(1.1); } /* Pattern 4: Link with underline animation */ .link { text-decoration: none; position: relative; } .link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: blue; transition: width 0.3s ease; } .link:hover::after { width: 100%; }

/* Question 1: What property creates smooth animations on hover? */ /* Answer: transition */ /* Question 2: Which transform makes an element grow? */ /* Answer: scale(1.1) */ /* Question 3: Which transform makes an element move up? */ /* Answer: translateY(-10px) */ /* Question 4: What values are needed for transition? */ /* Answer: property, duration, timing-function (e.g., all 0.3s ease) */