├── image.jpg ├── index.html └── style.css /image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegridweb/Change-Cursor-Animation-On-Image-Hover/33865c7821f9626e1f1572cd10d8f996169241bf/image.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Change Cursor On Hover 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 | 19 |
20 |
21 |
22 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | cursor: none; 6 | overflow: hidden; 7 | } 8 | 9 | * { 10 | box-sizing: border-box; 11 | } 12 | 13 | #wrapper { 14 | width: 100%; 15 | height: 100vh; 16 | background: #161616; 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | .cursor { 23 | position: absolute; 24 | background: white; 25 | width: 8px; 26 | height: 8px; 27 | border-radius: 100%; 28 | z-index: 1; 29 | transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 30 | 0.2s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity; 31 | user-select: none; 32 | pointer-events: none; 33 | transform: scale(0.8); 34 | } 35 | 36 | .cursor::before { 37 | content: ""; 38 | width: 100%; 39 | height: 100%; 40 | position: absolute; 41 | top: 0; 42 | left: 0; 43 | display: block; 44 | background-image: url("http://mirkozeppieri.emanuelepapale.com/wp-content/uploads/2018/07/project-hover-cursor.jpg"); 45 | background-position: center; 46 | background-repeat: no-repeat; 47 | background-size: cover; 48 | border-radius: 100%; 49 | opacity: 0; 50 | } 51 | 52 | .cursor.active { 53 | opacity: 1; 54 | transform: scale(12); 55 | } 56 | 57 | .cursor.active::before { 58 | opacity: 1; 59 | } 60 | 61 | .cursor-follower { 62 | position: absolute; 63 | background: rgba(255, 255, 255, 0.1); 64 | width: 40px; 65 | height: 40px; 66 | border-radius: 100%; 67 | z-index: 1; 68 | transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 69 | 0.4s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity; 70 | user-select: none; 71 | pointer-events: none; 72 | transform: translate(4px, 4px); 73 | } 74 | 75 | .cursor-follower.active { 76 | opacity: 0.3; 77 | transform: scale(0); 78 | } 79 | 80 | .portfolio-thumb { 81 | overflow: hidden; 82 | transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1); 83 | } 84 | 85 | .portfolio-thumb img { 86 | max-width: 360px; 87 | opacity: 0.4; 88 | transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1); 89 | transform-origin: 90% center; 90 | } 91 | 92 | .portfolio-item:hover .portfolio-thumb { 93 | transform: translateX(-1.75rem); 94 | } 95 | 96 | .portfolio-item:hover .portfolio-thumb img { 97 | opacity: 0.8; 98 | transform: scale(1.2); 99 | } 100 | --------------------------------------------------------------------------------