Niq's OA Resources
OA Review Widget
Resources
Basic coupons
Lunch Menus
Memes
Code stuff
video background
Interactive effects
Fade in effect
A new kind of Parallax
New Parallax integration
animate css
CSS Media Query
Dynamic column sorting
Number Replacement Script
Lightbox
Galleries
Easy Square Gallery
Hexagon Gallery
Horizontal Masonry Gallery
Vertical Masonry Gallery
Hover Overlay
Hexagons
Mznaztymaps
OA Content Replacement
OA carousel
Designer Resources
Design Process
Design Processes
Start-up Process
Redesign Process
Tasks
Tag and Links
Image practices
Font Awesome
Bootstrap Menu
OA Accordion
Hover Overlay
Hello, I am an Overlay (you could put another image or a background image here)
<div class="overlayContainer"> <img src="/wahelper/GetImage?id=273061"> <div class="overlay"> Overlay Content </div> </div> <style> .overlayContainer { position: relative; max-width: 400px; } .overlayContainer > img{ display: block; width: 100%; } .overlayContainer > .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: .5s ease; background-color: #000c; color: #fff; font-size: 24pt; font-weight: bold; display: flex; align-items: center; justify-content: center; padding: 1rem; } .overlayContainer:hover .overlay { opacity: 1; } </style>
If you really want to get fancy with it, you don't even need that second div. (more advanced CSS)
<div class="overLay" style="margin: auto;"> <img src="/wahelper/GetImage?id=273061"> </div> <style> .overLay { position: relative; max-width: 400px; } .overLay > img { display: block; width: 100%; } .overLay::after { /*replace content with whatever text you want in the overlay, or leave it '' if you are putting just a background-image*/ content: 'Overlay Content'; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: .5s ease; background-color: #000c; color: #fff; font-size: 24pt; font-weight: bold; } .overLay:hover::after { opacity: 1; } </style>
Powered by
Online Access
All Rights Reserved © 2001-2024
Privacy Policy