Create a CSS-Only Image Reveal Effect with Transparent Borders

A CSS-only picture exhibit effect can be solved in opposite ways. It’s indeed utterly easy to formula a pattern in that a image stands out of (is overflown by) its plain background —you usually place an image over a smaller component with a plain background.

You can get a same outcome if we use transparent borders, where we keep a size of a credentials component a same as that of a forehead and supplement pure borders in sequence to create an dull space for a forehead to crawl into.

How to Create a Cut-out Border Design with CSS

How to Create a Cut-out Border Design with CSS

With a cut-out limit pattern we can uncover to users what can be found underneath a limit area…Read more

There are some advantages in regulating a latter method. Since it’s a pure borders that yield a area for a forehead to crawl into, we can control a instruction of a overflow between a left, right, tip and bottom borders. Also, carrying a same distance for both a forehead and a credentials makes it easier to pierce both elements simultaneously opposite a page.

In a nutshell, we’re going to see how to create a CSS-only picture exhibit effect regulating a smaller plain background with a foreground picture that has pure borders. You can check out a final demo below.

1. Create a initial code

HTML-wise, only one div is required:

div class=foo/div

In a CSS, we use two CSS variables, --bgc and --dim for a background colour and a dimensions of a .foo container, respectively. In a example, we used a same value for a breadth and tallness to get a square-shaped box, emanate separate variables for a tallness and a breadth if we wish a rectangular.

A Look Into: Using CSS Variables

A Look Into: Using CSS Variables

Variables finally come to CSS. Yes, a CSS that we use bland for styling webpages. We have disccused…Read more

We also supplement a position:relative order to .foo, so that a pseudo-elements, that we’re gonna use for revealing a image, can be absolutely positioned (see below), and so stacked on any other.

.foo {
    --bgc: 
    --dim: 300px;
    width: var(--dim);
    height: var(--dim);
    background-color: var(--bgc);
    position: relative;
}

We add an dull content property to both pseudo-elements, .foo::before and .foo::after, to get them scrupulously rendered.

.foo::before,
.foo::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
}

The .foo element, a dual 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).

.foo,
.foo:hover,
.foo::before,
.foo::after,
.foo:hover::before,
.foo:hover::after {
    transition: renovate 500ms ease-in;
}

Understanding Pseudo-Element :before and :after

Understanding Pseudo-Element :before and :after

Cascading Style Sheet (CSS) is essentially dictated for requesting styles to a HTML markup, however in some cases…Read more

2. Add a image

We supplement a picture to a .foo::before pseudo-element as a credentials image, and size it to cover a whole pseudo-element with a width and height properties. We stack it right underneath a .foo element regulating a z-index: -1 rule.

.foo::before {
    width: 100%;
    height: 100%;
    background: url(camel.png) center/cover;
    z-index: -1;
}

The center keyword centres a image, while a cover keyword beam a picture to cover a whole element while progressing a aspect ratio.

On a screenshot below we can see what we have so distant (z-index is private from .foo::before so that it can be seen):

Background picture with a initial codeBackground picture with a initial code

3. Add a slide-out background

To supplement a smaller (slide-out) credentials behind a image, we’ll use a other pseudo-element, .foo::after.

We emanate another CSS variable, --b, for a border width. We give three pure borders to a ::after pseudo-element: top, right, and bottom.

.foo::after {
    --b: 20px;
    width: calc(100% - var(--b));
    height: calc(100% - calc(var(--b) * 2));
    border: var(--b) plain transparent;
    border-left: none;
    box-shadow: inset 0 var(--dim) 0 var(--bgc);
    filter: brightness(.8);
    z-index: -2;
}

The width is distributed as calc(100% - var--b)) that earnings the sum breadth of .foo reduction a sum breadth of a plane borders (right limit only, given there’s not left border).

The height is distributed as calc(100% - calc(var(--b) * 2)) that earnings the sum tallness of .foo reduction a sum breadth of a straight borders (top and bottom borders).

With a box-shadow property, we also add a plane inset shadow of a distance same as .foo (which is var(--dim)).

A CSS filter of brightness(.8) darkens a credentials colour a small bit, and finally, a z-index: -2 order places a ::after pseudo-element underneath ::before that contains a image.

Here’s a screenshot of a demo rendered so distant (with z-index private from both pseudo-elements so they can be seen):

Div and a dual pseudo-elements stackedDiv and a dual pseudo-elements stacked

4. Add a transformation

We add a transform property to a dual pseudo-elements, so when a user hovers over .foo, both pseudo-elements are moved horizontally.

A Look Into: CSS3 2D Transformations

A Look Into: CSS3 2D Transformations

[series_html5css3] The Transformation procedure is a extensive further in CSS3, it takes a approach we manipulate elements on…Read more

As we already combined a transition skill to all elements during a finish of Step 1, a transformation of a picture and a credentials are both animated.

.foo:hover::before,
.foo:hover::after {
    transform: translateX(100%);
}

Below, we can see a final demo.

Bonus: Optional margin

If we arrangement .foo next to other elements on a page and wish these other elements to move away when a picture and a credentials slides out, afterwards add a right
domain of a same breadth as that of .foo
to a .foo:hover element.

.foo:hover {
    margin-right: var(--dim);
}

Add Comment