How to add image refaction using CSS ?
Last Updated :
30 May, 2023
This article will show how to add image reflection using CSS. To achieve this task, you can use the -webkit-box-reflect to add the reflection of any HTML element.
The box-reflect property is a CSS property that allows you to create a reflection effect for an element. It is primarily used to add a mirror-like reflection below or above an element., and box-reflect property is nonstandard property so we use -webkit-box-reflect as a prefix.
-webkit-box-reflect: This property creates an image reflected in the below, above, left, or right position.
Syntax:
-webkit-box-reflect: below | above | left | right;
Example 1: In the below code, we will make use of the above syntax to add reflection.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
< style >
h1 {
color:green;
}
img {
-webkit-box-reflect:right;
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< h3 >A computer science portal for geeks</ h3 >
< img src =
alt = "GFG image" >
</ center >
</ body >
</ html >
|
Output:
Example 2: In the below code, we will make use of the above syntax to add reflection.
HTML
<!DOCTYPE html>
< html >
< head >
< title >GeeksforGeeks</ title >
< link rel = "stylesheet" href =
< style >
h1 {
color:green;
}
img {
-webkit-box-reflect: below;
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< h3 >A computer science portal for geeks</ h3 >
< img src =
alt = "GFG image" >
</ center >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...