Slider Revolution WP
09.27.2016
Extending Image Overlays
Option #1
Revolution Slider includes a dotted image overlay by default:
If you wanted, you could replace the png image files that are used for these repeated overlay patterns. Image locations shown in screenshot to the right.
Option #2
Add one of the following Custom CSS blocks to the slider's Custom CSS section, and adjust the "background" property.
Best for when your individual slides have captions:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.rev_slider .slotholder:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0; top: 0; pointer-events: none; /* black overlay with 50% transparency */ background: rgba(0, 0, 0, 0.5); } |
Best for when your individual slides do not have captions:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.rev_slider:after { width: 100%; height: 100%; content: ""; position: absolute; left: 0; top: 0; z-index: 99; pointer-events: none; /* black overlay with 50% transparency */ background: rgba(0, 0, 0, 0.5); } |
Option #3
Inside Photoshop, add a solid colored layer on top of the original image, give it a transparency value, and save the image.
