Realistic Image Reflection Without box-reflect property

March 29, 2021

Rahul

Hello, guys in this tutorial we will create a Realistic Image Reflection Without box-reflect property using HTML & CSS

Common Query

how to create Image Reflection
how to make Image Reflection Without box-reflect property

Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create a Realistic Image Reflection Without box-reflect property using HTML & CSS

First, we need to create three files index.html and style.css then we need to do code for it.

Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Realistic Image Reflection</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta https-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
  <div class="reflection">Stackfindover</div>
</body>
</html>

Step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.reflection {
  position: relative;
  display: block;
  margin: 10px;
  width: 626px;
  height: 375px;
  color: transparent;
  background-image: url(code.jpg);
}

.reflection::before {
  content: "";
  position: absolute;
  top: 100%;
  width: inherit;
  height: inherit;
  opacity: 0.25;
  background-image: inherit;
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
  -webkit-box-shadow: inset 0 150px 50px -12px #fff;
  -moz-box-shadow: inset 0 150px 50px -12px #fff;
  -ms-box-shadow: inset 0 150px 50px -12px #fff;
  -o-box-shadow: inset 0 150px 50px -12px #fff;
  box-shadow: inset 0 150px 50px -12px #fff;
}

Image Reflection Output: Watch Now

We hope you liked this article (Realistic Image Reflection Without box-reflect property). You should definitely keep your thoughts about it in the comment below and share this article with your friends.

Leave a Comment Cancel reply