Create a CSS-Only Image Reveal Effect with Transparent Borders
A CSS-only image reveal effect can be solved in different ways. It’s actually quite easy to code a design in which the image stands out of (is overflown by) its solid background —you just place an image over a smaller element with a solid background.
You can get the same result if you use transparent borders, where you keep the size of the background element the same as that of the foreground and add transparent borders in order to create an empty space for the foreground to overflow into.
With a cut-out border design we can show to users what can be found underneath the border area…Read more
There are some advantages in using the latter method. Since it’s the transparent borders that provide the area for the foreground to overflow into, we can control the direction of the overflow between the left, right, top and bottom borders. Also, having the same size for both the foreground and the background makes it easier to move both elements simultaneously across the page.
In a nutshell, we’re going to see how to create a CSS-only image reveal effect using a smaller solid background with a foreground image that has transparent borders. You can check out the final demo below.
In the CSS, we use two CSS variables, --bgc and --dim for the background colour and the dimensions of the .foo container, respectively. In the example, I used the same value for the width and height to get a square-shaped box, create separate variables for the height and the width if you want a rectangular.
The .foo element, its two pseudo-elements, .foo::before, .foo::after, and their :hover pseudo-classes get a transition property that will add an ease-in transition to them for 500 milliseconds (half a second).
Cascading Style Sheet (CSS) is primarily intended for applying styles to the HTML markup, however in some cases…Read more
2. Add the image
We add the image to the .foo::before pseudo-element as a background image, and size it to cover the whole pseudo-element with the width and height properties. We stack it right beneath the .foo element using the z-index: -1 rule.
If you display .foonext to other elements on a page and want these other elements to move away when the image and its background slides out, then add a right
margin of the same width as that of .foo to the .foo:hover element.