Shine Effect

Developer
Bryan Jones
Size
2,944 Kb
Views
58,696
  1. Shine Effect Previews
  2. Shine Effect HTML Codes
  3. Shine Effect CSS Codes
  4. Shine Effect JS Codes

How do I make an shine effect?

A nice shine effect when hovering over an image.. What is a shine effect? How do you make a shine effect? This script and codes were developed by Bryan Jones on 13 July 2022, Wednesday.

Shine Effect Previews
IQ Test

Shine Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shine Effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="item"> <div id="inner"> <div id="title"> <h1>My Image</h1> </div> <img src="http://www.bryanjones.us/sites/default/files/subway3.jpg"> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Shine Effect - Script Codes CSS Codes

body { background: url("http://bryanjones.us/sites/default/files/gridme.png") repeat #000;
}
#title { background: rgba(0, 0, 0, 0.75); border: 1px solid rgba(11, 205, 255, 0.5); color: #fff; height: calc(100% - 4vw); margin: 2vw; position: absolute; width: calc(100% - 4vw); -moz-transition: all 200ms linear 300ms; -o-transition: all 200ms linear 300ms; -webkit-transition: all 200ms linear; -webkit-transition-delay: 300ms; transition: all 200ms linear 300ms; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0);
}
h1 { font-size: 4vw; margin-top: calc(25% - 2vw); text-align: center;
}
img { height: auto; width: 100%;
}
#item { border: 2px solid rgba(11, 205, 255, 0.5); cursor: pointer; height: 28.2vw; left: 25vw; position: absolute; top: 22.8vh; width: 50vw; -moz-transition: all 100ms linear; -o-transition: all 100ms linear; -webkit-transition: all 100ms linear; transition: all 100ms linear;
}
#item:hover { -moz-transform: scale(0.95); -ms-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95);
}
#item:hover #title { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);
}
#item::after { background-color: rgba(255, 255, 255, 0.4); content: ""; height: 100%; left: 0; position: absolute; top: 0; transition: none 0s ease 0s; width: 0;
}
#item:hover::after { background-color: rgba(255, 255, 255, 0); width: 100%; -moz-transition: all 300ms ease-out 0s; -o-transition: all 300ms ease-out 0s; -webkit-transition: all 300ms ease-out; -webkit-transition-delay: 0s; transition: all 300ms ease-out 0s;
}
#inner::before { border-bottom: 6px solid #0bcdff; border-left: 4px solid #0bcdff; bottom: -3px; content: ""; height: 50px; left: -3px; position: absolute; transition: all 350ms linear 0s; width: 50px;
}
#inner::after { border-right: 4px solid #0bcdff; border-top: 6px solid #0bcdff; content: ""; height: 50px; position: absolute; right: -3px; top: -3px; transition: all 350ms linear 0s; width: 50px;
}

Shine Effect - Script Codes JS Codes

// No JS. Image created with Blender.
// Background is an altered grid
// pattern from subtlepatterns.com
Shine Effect - Script Codes
Shine Effect - Script Codes
Home Page Home
Developer Bryan Jones
Username bartuc
Uploaded July 13, 2022
Rating 4
Size 2,944 Kb
Views 58,696
Do you need developer help for Shine Effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bryan Jones (bartuc) Script Codes
Name
Form Labels
CSS Loader
Planet Rotation
Gravity
Potion
Cabin
Books
Earth Clock
Reflections
Planets
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!