How we can create a hover effect which moves according to mouse directions? Solution: See this Direction Aware Hover Effect Using Pure CSS, According Mouse Direction.
Previously I have shared a text fill according hover direction, but this hover effect is on images. Basically, direction-aware hover means it moves in the mouse direction. Suppose will move mouse left to right then the hover effect will reveal or move from left to right. This design trick always attracts peoples, it looks very cool. In other words, the hover effect or layout reveal from that side where users move their mouse cursor.
Today you will learn to create a hover which moves According Mouse Direction. Basically, there are 8 random images with texts. Each image has a different text and different color layout for hover. When you will move the cursor from one image to another image, then the hover layout will move same to same as the mouse movement. And when the layout comes over another image then color and text will change. Also, it will work on large and small screens both.
So, Today I am sharing Direction Aware Hover Effect Using Pure CSS. There I have used the only CSS for this program, and absolutely the layouts based on HTML. This is a grid-based program and there the screen-size does not matter, it will work finely on any screen size. You can use this program on your website after text and image modification.
If you are thinking now how this direction-aware hover effect actually is, then see the preview given below.
Preview Of Hover According Mouse Direction
See this video preview to getting an idea of how this hover effect looks like.
Live Demo
Now you can see this program visually, also you can see it live by pressing the button given above. If you like this then get the source code of its.
You May Also Like:
Direction Aware Hover Effect Using Pure CSS Source Code
Before sharing source code, let’s talk about it. First I have placed a heading and created a list with class name ‘grid‘. Inside the list, I have placed 8 images and texts as list items. There I have used random images that are based on a third-party website. Inside each <li> tag, I have placed a hyperlink tag and inside the hyperlink placed the image and text.
Now using CSS I have placed all the contents in the right place, as you can see in the preview. There I have used grid display ( display: grid; ) command and grid functions ( grid-* ) command. Actually grid command is creating the whole layout and it is responsive. Also there I have used CSS variables to store and pass data easily. I gave different color values for hover to each image using :nth-child() command.
Left all other things you will understand after getting the codes, I can’t explain all here in writing. For creating this program you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Direction-aware Hover Effect | Webdevtrick.com</title> <link href="https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Pure CSS Direction Aware Hover Effect</h1> </header> <ul class="grid"> <li> <a href="#"> <img src="https://source.unsplash.com/collection/17098/800x600/?sig=1" alt=""> <span class="description">First Image</span> </a> </li> <li> <a href="#"> <img src="https://source.unsplash.com/collection/17098/800x600/?sig=2" alt=""> </a> <span class="description">Second Image</span> </li> <li> <a href="#"> <img src="https://source.unsplash.com/collection/17098/800x600/?sig=3" alt=""> <span class="description">Third Image</span> </a> </li> <li> <a href="#"> <img src="https://source.unsplash.com/collection/17098/800x600/?sig=4" alt=""> <span class="description">Fourth Image</span> </a> </li> <li> <a href="#"> <img src="https://source.unsplash.com/collection/17098/800x600/?sig=5" alt=""> <span class="description">Fifth Image</span> </a> </li> <li> <a href="#"> <img src="https://source.unsplash.com/collection/17098/800x600/?sig=6" alt=""> <span class="description">Sixth Image</span> </a> </li> <li> <a href="#"> <img src="https://source.unsplash.com/collection/17098/800x600/?sig=7" alt=""> <span class="description">Seventh Image</span> </a> </li> <li> <a href="#"> <img src="https://source.unsplash.com/collection/17098/800x600/?sig=8" alt=""> <span class="description">Eighth Image</span> </a> </li> </ul> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ :root { --offset: 1rem; } *, *:before, *:after { box-sizing: border-box; } header { padding: 1rem; font-family: 'Odibee Sans', cursive; font-size: 2em; } h1 { margin-top: 0; color: #212121; } @media (min-width: 40em) { body { display: grid; grid-template-columns: 1fr 3fr; } } img, a { display: block; height: 100%; } img { max-width: 100%; width: 100%; object-fit: cover; } .grid { display: grid; grid-gap: 0; overflow: hidden; list-style: none; margin: 0; padding: 0; height: 100vh; } .grid li { position: relative; } .grid li:hover ~ li:last-child:after, .grid li:last-child:hover:after, .grid li:hover ~ li:last-child:before, .grid li:last-child:hover:before { opacity: 1; transition: 1s ease; } .grid li:last-child:after, .grid li:last-child:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; pointer-events: none; clip-path: polygon(var(--offset) var(--offset), var(--offset) calc(100% - var(--offset)), calc(100% - var(--offset)) calc(100% - var(--offset)), calc(100% - var(--offset)) var(--offset)); -webkit-clip-path: polygon(var(--offset) var(--offset), var(--offset) calc(100% - var(--offset)), calc(100% - var(--offset)) calc(100% - var(--offset)), calc(100% - var(--offset)) var(--offset)); opacity: 0; transition: opacity 1s, transform 1s 1s, background 1s; } .grid li:last-child:after { mix-blend-mode: multiply; background: #aaafc3; } .grid li:last-child:before { backdrop-filter: grayscale(100%) blur(2px); -webkit-backdrop-filter: grayscale(100%) blur(2px); } .grid li:nth-child(1):hover ~ li:last-child:after { background: #2ab1ce; } .grid li:nth-child(2):hover ~ li:last-child:after { background: #4267b2; } .grid li:nth-child(3):hover ~ li:last-child:after { background: #e64786; } .grid li:nth-child(4):hover ~ li:last-child:after { background: #fd2914; } .grid li:nth-child(5):hover ~ li:last-child:after { background: #fbb016; } .grid li:nth-child(6):hover ~ li:last-child:after { background: #6bca6c; } .grid li:nth-child(7):hover ~ li:last-child:after { background: #173b51; } .grid li:last-child:hover:after { background: #ff6d34; } .grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 33.3333333333%); } .grid li:last-child:after, .grid li:last-child:before { left: 100%; transform: translate3d(-100%, -100%, 0); } .grid li:nth-child(1):hover ~ li:last-child:after, .grid li:nth-child(1):hover ~ li:last-child:before { transform: translate3d(-200%, -200%, 0); } .grid li:nth-child(2):hover ~ li:last-child:after, .grid li:nth-child(2):hover ~ li:last-child:before { transform: translate3d(-100%, -200%, 0); } .grid li:nth-child(3):hover ~ li:last-child:after, .grid li:nth-child(3):hover ~ li:last-child:before { transform: translate3d(0%, -200%, 0); } .grid li:nth-child(4):hover ~ li:last-child:after, .grid li:nth-child(4):hover ~ li:last-child:before { transform: translate3d(-200%, -100%, 0); } .grid li:nth-child(5):hover ~ li:last-child:after, .grid li:nth-child(5):hover ~ li:last-child:before { transform: translate3d(-100%, -100%, 0); } .grid li:nth-child(6):hover ~ li:last-child:after, .grid li:nth-child(6):hover ~ li:last-child:before { transform: translate3d(0%, -100%, 0); } .grid li:nth-child(7):hover ~ li:last-child:after, .grid li:nth-child(7):hover ~ li:last-child:before { transform: translate3d(-200%, 0%, 0); } .grid li:last-child:hover:after, .grid li:last-child:hover:before { transform: translate3d(-100%, 0%, 0); } @media (max-width: 60em) { .grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 25%); } .grid li:last-child:after, .grid li:last-child:before { left: 0%; transform: translate3d(-50%, -150%, 0); } .grid li:nth-child(1):hover ~ li:last-child:after, .grid li:nth-child(1):hover ~ li:last-child:before { transform: translate3d(-100%, -300%, 0); } .grid li:nth-child(2):hover ~ li:last-child:after, .grid li:nth-child(2):hover ~ li:last-child:before { transform: translate3d(0%, -300%, 0); } .grid li:nth-child(3):hover ~ li:last-child:after, .grid li:nth-child(3):hover ~ li:last-child:before { transform: translate3d(-100%, -200%, 0); } .grid li:nth-child(4):hover ~ li:last-child:after, .grid li:nth-child(4):hover ~ li:last-child:before { transform: translate3d(0%, -200%, 0); } .grid li:nth-child(5):hover ~ li:last-child:after, .grid li:nth-child(5):hover ~ li:last-child:before { transform: translate3d(-100%, -100%, 0); } .grid li:nth-child(6):hover ~ li:last-child:after, .grid li:nth-child(6):hover ~ li:last-child:before { transform: translate3d(0%, -100%, 0); } .grid li:nth-child(7):hover ~ li:last-child:after, .grid li:nth-child(7):hover ~ li:last-child:before { transform: translate3d(-100%, 0%, 0); } .grid li:last-child:hover:after, .grid li:last-child:hover:before { transform: translate3d(0%, 0%, 0); } :root { --offset: 0; } } .description { font-family: "Unica One", sans-serif; font-size: 1.25rem; position: absolute; display: block; right: 2rem; left: 2rem; text-align: center; top: 50%; width: 60px; margin: auto; color: white; z-index: 100; opacity: 0; transform: translate3d(0, -50%, 0); transition: .3s 0s; } li:hover .description { opacity: 1; transition: .6s .3s; } |
That’s It. Now you have successfully created Direction Aware Hover Effect Using Pure CSS, Moves According Mouse Direction. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
results can’t display.
And backdrop-filter property support sublimetext-3 .
Thanks for the source code – wondering if you can help out. I did have it working but now its showing the hover background on the wrong gird item and I cannot figure out where I;ve gone wrong. I even copied your original css back and its still doing it. Appreciate any pointers, https://bricks.itchyfingersdesign.com/direction-aware-hover-effect-in-bricks-builder-demo/
[…] was originally found on this website but I have modified things a little. It’s not 100% perfect so I plan to update this post with […]