HTML CSS Reflection Effect

byCodingFlicks -November 01, 2023

0

Today we will share with you a CSS Tricks snippet of the Realistic Image Reflection effect made with HTML CSS. Realistic Image Reflection or HTML CSS Mirror Effect is a web design and development trick that simulates the appearance of an image reflected on a surface. Much like a reflection, you might see in water or on a shiny floor. Those of you learning CSS will learn about a new property from this snippet. A video tutorial below shows how to create this snippet. Those of you who are interested watch this video and if you like it please subscribe to our channel.

Video Tutorial:

Hope you have watched the video tutorial. Many use 'transform' and 'gradient' to position and style the reflected image to create image reflection effects with HTML CSS. But here we will use a CSS property called 'webkit-box-reflect'. Please note that this CSS property is not supported by some browsers such as Firefox, Internet Explorer, and Opera Mini. Beginners experiment with various properties of CSS in the beginning with the purpose of learning. This snippet is made for this purpose only. This kind of reflection effect makes a website's images very visually appealing. This technique can be used to create the illusion that the website images are sitting on a reflective surface. It's a creative use of CSS and this technique can be used to present a website's image more dynamically.

In the HTML part of our snippet, we have a container element whose class attribute is 'container'. Then three child elements are taken inside each of which class attribute is 'image'. Within each "image" element, there is an "img" element. In the CSS part, the body element is given a black background color. The reflection effect stands out over the black background color. The container element is set to be 80% wide, centered horizontally with a 10% margin on top and bottom. It also uses Flexbox to arrange its children. Each 'image' div is given a 30% width and a fixed height of 200 pixels. Then the '-webkit-box-reflect' CSS property is used for the reflection effect of each individual image.

You may Also Like:

HTML CSS Reflection Effect [ Source Code ]:

After creating the CSS and HTML files, copy the code from the code box below and paste it into your project. If there is any problem there is a download button below through which you can download the code.

ADD HTML:

<!DOCTYPE html>
<!-- codingflicks.com -->
<html>
<head>
    <title>Realistic Image Reflection using CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="image">
          <img src="img/1.jpg" alt="">
        </div>
        <div class="image">
          <img src="img/2.jpg" alt="">
        </div>
        <div class="image">
          <img src="img/3.jpg" alt="">
        </div>
      </div>
</body>
</html>

ADD CSS:

body {
	background: #000;
}
.container {
	width: 80%;
	margin: 10% auto;
	display: flex;
	justify-content: space-between;
}
.image {
	width: 30%;
	height: 200px;
}
.image img {
	width: 100%;
	-webkit-box-reflect: below 4px linear-gradient(transparent 25%, rgba(0, 0, 0, 0.35));
}

In order to enhance the aesthetics of images on a website, this CSS technique is used by many famous websites. One of them is Apple which uses this technique to showcase some of its products. Besides, Adobe Portfolio, fashion websites, and photography websites also use this effect. Click on the Load More button on the homepage to get other snippets of our website. Thank you very much for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.