In this article, we will discuss how to realize a card Hover animation as shown below:
A couple of difficulties with this effect:
- Shows the border and glow of the current card edge on mouseover;
The effect only appears near the mouse? There are many ways to implement this piece, you can calculate the range near the mouse and go within the range to achieve the effect, but this is too costly.
Switching your thinking a bit, you can actually utilize the idea of masking as well. At the beginning of the overall effect has been achieved, that is, the gradient color of the entire border as well as the overall inner glow effect, through the idea of masking, so that the entire mask layer to follow the mouse to move.
- The overall effect needs to be adapted to the movement of the mouse, following the mouse movement and switching the effect;
Based on the above motion picture, so far, pure CSS in the mouse movement effect to follow, can not be solved, here you need to introduce a certain amount of Javascript code.
Based on the difficulties (1) and (2) above, let's see together how to realize this effect step by step.
Build the entire static effect
First, we need to build the entire static effect. That is, without any hover, as shown below:
Since, the bokeh map effect behind each image is supposed to be a thousand different based on the image, it is not possible to be able to Cover all situations with one background image.
And, the effect of the bokeh behind the picture needs to be roughly the same color as the actual picture.
Based on the above two points, it is easy to think of using thefilter: blur() fuzzy to handle such cases.
The code is also relatively simple:
<div></div>
:root {
--pic: url("https://oss./2023/05/");
}
div {
position: relative;
margin: auto;
width: 350px;
height: 500px;
border-radius: 30px;
overflow: hidden;
&::before,
&::after {
content: "";
position: absolute;
background: var(--pic);
background-size: cover;
background-position: center;
border-radius: 30px;
}
&::before {
inset: 0;
filter: blur(20px);
}
&::after {
inset: 50px;
}
}
Here, we use one layer of pseudo-elements of the element to realize the original image and another layer of pseudo-elements to realize the defocused image:
The benefit of this is that the bokeh layer behind it, can be adapted to any number of different images:
Implement gradient color border
Next, we need to implement a gradient color border effect.
This is done with the help ofconic-gradient Realization.
We need to use another div to achieve our effect:
<div></div>
div {
width: 350px;
height: 500px;
border-radius: 30px;
background: conic-gradient(#03a9f4, #e91e63, #9c27b0, #ff5722, #03a9f4);
}
This gives us a graph like this:
Superimpose it on top of our effect above, making the whole graphic, just a little bit bigger than the above bokeh background, so that the effect looks like this:
Look closely, the picture takes on a gradient color border.
Wait, look more closely! In addition to the gradient color border, the current effect, actually comes with an inner glow (inner shadow) effect, really crooked, which is not exactly what we need to achieve:
enquire intofilter: blur() Transparent effect
Why is this? The reason is that setting up thefilter: blur() of the element will be from the edges towards the center with a transparent decay effect.
Let's simply do an experiment:
<div></div>
<div></div>
div {
position: relative;
width: 200px;
height: 300px;
border-radius: 10px;
border: 1px solid #000;
background: conic-gradient(#03a9f4, #e91e63, #9c27b0, #ff5722, #03a9f4);
&::before {
content: "";
position: absolute;
inset: 10px;
border-radius: 10px;
background: #fff;
border: 1px solid #000;
}
}
We've set up two identical divs, where the element itself has an angular gradient background.
Next, using its pseudo-elements, the boundary is spaced apart in the middle of the element10px place, set an element with a white background. The effect is as follows:
At this moment, the two elements are not different. But next, we give the second element a pseudo-element, add on afilter: blur() Gaussian blur effect:
div:nth-child(2) {
&::before {
filter: blur(20px);
}
}
At this point, look at the effect again:
At the edges of the white elements, in the inward direction, there is actually a fading transparency effect.
Of course, since the Gaussian blur also produces an outward spreading effect, the above DEMO schematic does not look very clear, we can set up an additional layer of containers through theoverflow: hidden Stop the Gaussian blur from spreading outward.
Let's tweak the layout a bit more:
<div class="g-father">
<div class="g-child"></div>
</div>
<div class="g-father">
<div class="g-child"></div>
</div>
.g-father {
position: relative;
width: 200px;
height: 300px;
border-radius: 10px;
border: 1px solid #000;
background: conic-gradient(#03a9f4, #e91e63, #9c27b0, #ff5722, #03a9f4);
.g-child {
position: absolute;
inset: 10px;
border-radius: 10px;
border: 1px solid #000;
overflow: hidden;
&::before {
content: "";
position: absolute;
inset: 0;
background: #fff;
border-radius: 10px;
}
}
}
.g-father:nth-child(2) {
.g-child::before {
filter: blur(20px);
}
}
At this point, let's look at the whole effect again, setting up thefilter: blur() elements, it will go from the edges to the center, and the effect with transparent attenuation will be very obvious:
For the full DEMO, you can poke here:CodePen Demo -- filter: blur Transparency Effect
Mouse movement event listener with mask to achieve the overall effect
Okay, by this point, we've managed to get such an effect:
Based on the above effect, what we end up doing is to finally realize such an effect:
Here, we'll utilize mouseover event listeners in conjunction with mask.
Since our above effect is realized in layers, where the border and inner glow layer, is actually such a background effect:
Here's what we're going to do:
- utilization
radial-gradient()Implements a radial gradient mask; - Listens for mouseover events that move the center of the mask;
- You can set one more layer to realize that the background corner gradient element only appears when you Hover, and disappears when the mouse leaves the element area;
The rough code is as follows:
<div >
<div ></div>
</div>
:root {
--x: 0;
--y: 0;
}
#g-container {
position: relative;
width: 350px;
height: 500px;
border-radius: 30px;
}
#g-img {
position: absolute;
inset: 0px;
border-radius: 30px;
background: conic-gradient(#03a9f4, #e91e63, #9c27b0, #ff5722, #03a9f4);
mask: radial-gradient(
circle at var(--x) var(--y),
#000,
#000,
transparent,
transparent,
transparent
);
}
const container = ("g-container");
const img = ("g-img");
("mousemove", (event) => {
= 'visible';
const target = ;
const rect = ();
var offsetX = - ;
var offsetY = - ;
var percentX = (((offsetX / , 0), 1) * 100).toFixed(2);
var percentY = (((offsetY / , 0), 1) * 100).toFixed(2);;
('X: ' + percentX + '%');
('Y: ' + percentY + '%');
('style', `--x: ${percentX}%;--y: ${percentY}%;`);
});
("mouseout", (event) => {
= 'hidden';
});
Moving the mouse over the graphic gives us this effect:
Well, merge in the first two layers mentioned above as well, so that we end up with the perfect realization of the effect we want:
The complete code is scattered in the above, do not repeat the paste affect the reading experience, interested students, you can poke here to get the full DEMO effect and source code:
CodePen Demo -- CSS 3D Rotate With Mouse Move DEMO
ultimate
Well, that's the end of this article, I hope this article has been helpful 😃
To get the most interesting CSS information, don't miss my public website ---iCSS front-end anecdotes 😄
More great CSS technical articles are summarized in myGithub -- iCSS The newest version of the book is the one with the most updated version, so feel free to subscribe and bookmark it with a star.
If there are any questions or suggestions, you can communicate more, the original article, the writing is limited, shallow, the text if there is not correct, I hope to inform.