How to Create CSS-Only Image Reveal Effect using Transparent Borders

Background image with the first code

Hello friends today we gonna learn about How to Create CSS-Only Image Reveal Effect using Transparent Borders. So read this article, How to Create CSS-Only Image Reveal Effect using Transparent Borders step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Create CSS-Only Image Reveal Effect using Transparent Borders

A CSS-only image revealing effect can be solved in several ways. It’s actually quite easy to code a design that includes the image stands out (being inundated by) its solid background – just you place an image about a smaller element with a solid background.

You can get the same result as you transparent edges, where you have the size of the background element the same like that of the foreground and add transparent borders around create an empty space for the foreground to overflow into.

There are some advantages when using the latter methodSince it’s the transparent edges that make up the area for the foreground to blend into, we can control over the direction of the landing between the left, right, top and bottom edges. Also with the same size for both foreground and background makes it easier to move both elements at the same time about the page.

In a nutshell, we’ll see how to create a CSS-only image revealing effect use one smaller solid background right away foreground image with transparent bordersYou can use the final demo Below.

See the Pen CSS-Only Image Reveal Effect from Compsmag (@hkdc) on CodePen.

back to menu ↑

1. Create the first code

HTML wise, there is only one

necessary

In the CSS we use two CSS variables, –Bgc and –dim for the background colour and the dimensions of the .foo container. In the example I have the same value make a square box for the width and height individual variables for the height and the width if you want a rectangle.

We also add the position: relative line to .foo, so that are pseudo elements that we are going to use for revealing the image, could be absolutely positioned (see below), and so stacked on top of each other

.foo {–bgc: # FFCC03; –Dim: 300px; width: var (–dim); height: var (–dim); background color: var (–bgc); position: relative;}

We add an empty content property to both pseudo elements, .foo :: before and .foo :: after, to get them displayed correctly.

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

The .foo element, are two pseudo elements, .foo :: before, .foo :: after, and their: hover pseudo classes acquire a transition property that will add an easy transition to them for 500 milliseconds (half a second).

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

back to menu ↑

2. Add the picture

We add the image to the .foo :: before pseudo element as a background image, and format it to cover the entire pseudo-element with the properties width and height. We stack it directly below the .foo element using the z-index: -1 line.

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

The central keyword centers the image, while the cover keyword scales the image to cover the whole element while maintaining the aspect ratio.

On the screenshot below you can see what we have so far (z-index has been removed from .foo :: before so it can be seen):

back to menu ↑

3. Add the slideout background

To smaller (extendable) background behind the image, we use the other pseudo-element, .foo :: after.

We’ll create another CSS variable, –b, for the boundary widthWe give three transparent edges to the :: 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) solid transparent; border-left: none; box-shadow: inset 0 var (–dim) 0 var (–bgc); filter: brightness (.8); z-index: -2;}

The width is calculated as calc (100% – var – b)) which returns the total width of .foo minus the total width of the horizontal borders (right edge only, as there is no left edge).

The height is calculated as calc (100% – calc (var (–b) * 2)) which returns the total height of .foo minus the total width of the vertical borders (top and bottom edge).

With the box-shadow property, we also have add a horizontal inset shadow with the same size as .foo (which is var (–dim)).

A CSS filter of brightness (.8) makes the background color darker a little bit, and finally, the z-index: -2 line puts the :: after pseudo element under :: before that contains the image.

Here is the screenshot of the demo displayed so far (with z-index removed from both pseudo-elements so they can be seen):

Div and are two pseudo elements stacked

back to menu ↑

4. Add the transformation

We add the transformation property to the two pseudo elements, so when the user hovers over .foo, both pseudo elements are moved horizontally

Like us has already added the transition property to all elements at the end of step 1 is the movement of the image and background both animated

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

Below you can see the final demo

See the Pen CSS-Only Image Reveal Effect from Compsmag (@hkdc) on CodePen.

back to menu ↑

Bonus: optional margin

If your .foo among other elements on a page and want these other elements go away if the image and background slide out, then add a right margin with the same width as that of .foo to the .foo: hover element.

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

back to menu ↑

How to Create CSS-Only Image Reveal Effect using Transparent Borders: benefits

  • The How to Create CSS-Only Image Reveal Effect using Transparent Borders tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Create CSS-Only Image Reveal Effect using Transparent Borders guide is free.

back to menu ↑

Faq

Tutorial summary of How to Create CSS-Only Image Reveal Effect using Transparent Borders

In this guide, we told you about the How to Create CSS-Only Image Reveal Effect using Transparent Borders; please read all steps so that you understand How to Create CSS-Only Image Reveal Effect using Transparent Borders in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Create CSS-Only Image Reveal Effect using Transparent Borders, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Create CSS-Only Image Reveal Effect using Transparent Borders tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to Create CSS-Only Image Reveal Effect using Transparent Borders. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Create CSS-Only Image Reveal Effect using Transparent Borders, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Create CSS-Only Image Reveal Effect using Transparent Borders”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Create CSS-Only Image Reveal Effect using Transparent Borders, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart