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.
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.
You May Also Like:
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.
<!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>
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));
}
For the Original Post CLICK HERE
Top comments (0)