How to Create Reflection Below the Image in CSS

In this CSS tutorial, we'll show you how to create a reflection below an image using CSS.

Creating a reflection effect below an image can be a great way to add visual interest to your website.

With CSS, it’s easy to create this effect and make your images stand out.

In this CSS tutorial, we’ll show you how to create a reflection below an image using CSS.

HTML Markup

The first step in creating a reflection below an image is to create the HTML markup for the image.

Here’s an example of how you might do this:

<div class="image-container">
  <img src="image.jpg" alt="Image">
</div>

In this example, we’ve created a div element with a class of “image-container” that contains the image.

The class can be used later to apply the CSS for the reflection effect.

CSS for the Reflection

Once you have the HTML markup in place, you can create the CSS for the reflection.

Here’s an example of how you might do this:

image-container:after {
  content: "";
  display: block;
  position: relative;
  bottom: -50px;
  left: 0px;
  width: 100%;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

In this example, we’re using the :after pseudo-element to create the reflection.

We’re setting the display property to “block” so that the reflection takes up the full width of the image.

We’re also using the “bottom” property to position the reflection 50 pixels below the bottom of the image.

We’re also using a linear gradient to create the fade effect.

The gradient goes from fully opaque white at the top to fully transparent white at the bottom.

This creates the illusion of a reflection.

Final Result

With the HTML markup and CSS in place, you should now have a reflection below your image.

Here’s an example of what the final result might look like:

Example of reflection below an image

In conclusion, creating a reflection below an image using CSS is a simple process that can add visual interest to your website.

By using the :after pseudo-element and a linear gradient, you can easily create a realistic reflection effect that will make your images stand out.

Tags

Related Posts