HTML Image With Reflection Effect

Written by @kerixa 3 March 2021

Photos are inseparable parts of all websites and without them, the web pages are very boring. But to make them more attractive, it is a wise way to add reflection to them. With the following code script, it is shown how to add reflection effect to the images.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
.reflection {
    -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.9));
}

body {
    background-color: #000;
    text-align: center;
}
</style>
<img src="http://htmlfreecode.com/files/phone.png"  class="reflection" width="150px"  />
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300