JavaScript | Image With Reflection And Proximity Effect On Hover (HTML, CSS) ...

USER LOGIN:

VIDEOS

How to Add the Quick Launch T

Make Windows 11 Look Better

YES! You can keep Windows 10

Instant Instagram Reel Cover

Make ANY Windows PC faster in

Windows 11 Killing Your SSD?

Popular:

TOP

POPULAR

VIDEO

NEWS

LINKS

IMAGES

RADIO

Guest | Registration

SCRIPTS

PHP

TIPS

ICONS

MUSIC

TRAINERS

TORRENTS

FREEWARE

PORTABLE

UPDATES

NEW

CSS, JS, STYLE, CODE: 55 scripts / 1 comments ...

A-Z | # A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Image With Reflection And Proximity Effect On Hover (HTML, CSS)

Java

Images

Effect On Hover

August 15, 2024

363 views,

JavaScript | Image With Reflection And Proximity Effect On Hover (HTML, CSS) ...

Author: Tiago Alexandre Lopes

Publiser Software Listings

License: Freeware

Compatibility: Chrome IE

Language: English

DEMO

Similar versions: (35)

Views:

Image Hover Effect - 4 (Pug, SCSS, JS)

642

THREE Image Transition (HTML, CSS, JS)

385

Animated CSS Image (Slim, SCSS)

650

Colorful shadows (HTML, CSS, JS)

647

Animated Covers (HTML, CSS, JS)

581

Simple Pulsing Image Hover Effect (HTML, CSS)

649

show 35 similar results

Author: Tiago Alexandre Lopes

Created on: June 2, 2017

Made with: HTML, CSS

ENTIRE CODE

a{
  color: #111
}

.photo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.photo img{
  width: 200px;
  height: 280px;
  object-fit: cover;
  filter: grayscale(100%) contrast(120%);
  box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2);
  display: block;
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
  margin-top: -10px;
}

.photo:hover img{
  box-shadow: 1px 1px 10px 0 rgba(0,0,0,.1);
}

.photo .glow-wrap{
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  margin-top: -10px;
}

.photo .glow{
  display: block;
  position:absolute;
  width: 40%;
  height: 200%;
  background: rgba(255,255,255,.2);
  top: 0;
  filter: blur(5px);
  transform: rotate(45deg) translate(-450%, 0);
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photo:hover .glow{
  transform: rotate(45deg) translate(450%, 0);
  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photo:hover img,
.photo:hover .glow-wrap{
  margin-top: 0;
}

h1{
  position: absolute;
  z-index: 1;
  transform: translate(-25%, -65%);
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  line-height: 1.2;
}

/* Ends */

#author{
  font-family: Helvetica, Arial;
  text-transform: uppercase;
  font-size: 14px;
  text-decoration: none;
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  color: #888;
}

#author:hover{
  color: #111;
}
</style>

</head>

<a href="#" class="photo">
  <h1>Amber Heard</h1>
    <img src="https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg" />
  <div class="glow-wrap">
    <i class="glow"></i>
  </div>
</a>

<a href="http://tiagoalexandrelopes.com/" target="_blank" id="author">About me</a>

How to use this HTML Script on your website?

First you need to open the page with a HTML editor such as dream weaver or front page or even note pad , notice that if you using any other page making (ASP, PHP , etc.) languages it doesn't matter. Just open it and access to source file.

When you Open it, there are some codes in HTML called tags:

you have to find something called "BODY"

In HTML code it's like

When you find it just skip a line and copy and paste after body tag the codes which we offered you in this website
Anyways if you couldn't find that just paste the codes in the end of the source file.