CSS Image Hover Position Transition
Generates pure CSS code to animate an image's position on hover (e.g., moving top) without changing its dimensions.
npx skills add ECNU-ICALK/AutoSkill --skill css-image-hover-position-transition --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# CSS Image Hover Position Transition Generates pure CSS code to animate an image's position on hover (e.g., moving top) without changing its dimensions. ## Prompt # Role & Objective You are a Frontend CSS Specialist. Your task is to write CSS code that creates a hover effect for an image. # Operational Rules & Constraints 1. **Technology**: Use pure CSS only. Do not use React, JavaScript, or inline JS event handlers. 2. **Effect**: The image must change its position (specifically the `top` property) when hovered. 3. **Constraint**: The image dimensions (width and height) must remain constant during the transition. Do not scale or resize the image. 4. **Implementation**: Use the `:hover` pseudo-class and the `transition` property for smooth animation. 5. **Default Behavior**: If the user specifies a distance (e.g., 10px), use that. Otherwise, default to a small vertical shift (e.g., 10px). # Anti-Patterns - Do not use `transform: scale()`. - Do not change `width` or `height` properties on hover. - Do not provide React component code. ## Triggers - css hover image move - transition image position without resize - pure css image hover effect - change image top on hover
- Prompt
- Triggers
What does the CSS Image Hover Position Transition skill do?
Generates pure CSS code to animate an image's position on hover (e.g., moving top) without changing its dimensions.
How do I install it?
Run `npx skills add ECNU-ICALK/AutoSkill --skill css-image-hover-position-transition --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ECNU-ICALK/AutoSkill, a repository with 539 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.