In a earlier article, we performed with CSS masks to create cool hover results the place the principle problem was to rely solely on the <img> tag as our markup. On this article, choose up the place we left off by “revealing” the picture from behind a sliding door form of factor — like opening up a field and discovering {a photograph} in it.
It’s because the padding has a transition that goes from s – 2*b to 0. In the meantime, the background transitions from 100% (equal to –s) to 0. There’s a distinction equal to 2*b. The background covers the complete space, whereas the padding covers much less of it. We have to account for this.
Ideally, the padding transition would take much less time to finish and have a small delay originally to sync issues up, however discovering the right timing gained’t be a straightforward job. As a substitute, let’s enhance the padding transition’s vary to make it equal to the background.
img {
–h: calc(var(–s) – var(–b));
padding-top: min(var(–h), var(–s) – 2*var(–b));
transition: –h 1s linear;
}
img:hover {
–h: calc(-1 * var(–b));
}
The brand new variable, –h, transitions from s – b to -b on hover, so we have now the wanted vary for the reason that distinction is the same as –s, making it equal to the background and clip-path transitions.
The trick is the min() perform. When –h transitions from s – b to s – 2*b, the padding is the same as s – 2*b. No padding modifications throughout that transient transition. Then, when –h reaches 0 and transitions from 0 to -b, the padding stays equal to 0 since, by default, it can’t be a unfavourable worth.
It will be extra intuitive to make use of clamp() as an alternative:
padding-top: clamp(0px, var(–h), var(–s) – 2*var(–b));
That mentioned, we don’t have to specify the decrease parameter since padding can’t be unfavourable and can, by default, be clamped to 0 if you happen to give it a unfavourable worth.
We’re getting a lot nearer to the ultimate outcome!
First, we enhance the border’s thickness on the left and backside sides of the picture:
–b: 10px; /* the picture border */
–d: 30px; /* the depth */
border: stable #0000;
border-width: var(–b) var(–b) calc(var(–b) + var(–d)) calc(var(–b) + var(–d));
}
Second, we add a conic-gradient() on the background to create darker colours across the field:
conic-gradient(at left var(–d) backside var(–d),
#0000 25%,#0008 0 62.5%,#0004 0)
var(–c);
Discover the semi-transparent black colour values (e.g., #0008 and #0004). The slight little bit of transparency blends with the colours behind it to create the phantasm of a darkish variation of the principle colour for the reason that gradient is positioned above the background colour.
And lastly, we apply a clip-path to chop out the corners that set up the 3D field.
See the Pen The picture inside a 3D field by Temani Afif.
Now that we see and perceive how the 3D impact is constructed let’s put again the issues we eliminated earlier, beginning with the padding:
See the Pen Placing again the padding animation by Temani Afif.
It really works effective. However be aware how we’ve launched the depth (–d) to the system. That’s as a result of the underside border is not equal to b however b + d.
padding-top: min(var(–h),var(–s) – 2*var(–b) – var(–d));
Let’s do the identical factor with the linear gradient. We have to lower its dimension so it covers the identical space because it did earlier than we launched the depth in order that it doesn’t overlap with the conic gradient:
See the Pen Placing again the gradient animation by Temani Afif.
We’re getting nearer! The final piece we have to add again in from earlier is the clip-path transition that’s mixed with the box-shadow. We can’t reuse the identical code we used earlier than since we modified the clip-path worth to create the 3D field form. However we will nonetheless transition it to get the sliding outcome we would like.
The concept is to have two factors on the high that transfer up and all the way down to reveal and conceal the box-shadow whereas the opposite factors stay fastened. Here’s a small video for example the motion of the factors.
See that? We have now 5 fastened factors. The 2 on the high transfer to extend the realm of the polygon and reveal the field shadow.
clip-path: polygon(
var(–d) 0, /* –> var(–d) calc(-1*(var(–s) – var(–d))) */
100% 0, /* –> 100% calc(-1*(var(–s) – var(–d))) */
/* the fastened factors */
100% calc(100% – var(–d)), /* 1 */
calc(100% – var(–d)) 100%, /* 2 */
0 100%, /* 3 */
0 var(–d), /* 4 */
var(–d) 0); /* 5 */
}
And we’re accomplished! We’re left with a pleasant 3D body across the picture component with a canopy that slides up and down on hover. And we did it with zero additional markup or reaching for pseudo-elements!
See the Pen 3D picture with reveal impact by Temani Afif.
And right here is the primary demo I shared at first of this text, exhibiting the 2 sliding variations.
See the Pen Picture reward field (hover to disclose) by Temani Afif.
This final demo is an optimized model of what we did collectively. I’ve written a lot of the formulation utilizing the variable –h in order that I solely replace one worth on hover. It additionally consists of one other variation. Are you able to reverse-engineer it and see how its code differs from the one we did collectively?
One Extra 3D Instance
Need one other fancy impact that makes use of 3D results and sliding overlays? Right here’s one I put collectively utilizing a unique 3D perspective the place the overlay splits open quite than sliding from one aspect to the opposite.
See the Pen Picture reward field II (hover to disclose) by Temani Afif.
Your homework is to dissect the code. It might look advanced, however if you happen to hint the steps we accomplished for the unique demo, I feel you’ll discover that it’s not a very completely different method. The sliding impact nonetheless combines the padding, the object-* properties, and clip-path however with completely different values to supply this new impact.
Conclusion
I hope you loved this little 3D picture experiment and the flowery impact we utilized to it. I do know that including an additional component (i.e., a mum or dad <div> as a wrapper) to the markup would have made the impact rather a lot simpler to attain, as would pseudo-elements and translations. However we’re right here for the problem and studying alternative, proper?
Limiting the HTML to solely a single component permits us to push the bounds of CSS to find new strategies that may save us time and bytes, particularly in these conditions the place you won’t have direct entry to change HTML, like if you’re working in a CMS template. Don’t take a look at this as an over-complicated train. It’s an train that challenges us to leverage the facility and adaptability of CSS.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!