On this site, I have added a random color overlay to the media-boxes.
Check it out here
Thanks to the helpful folks at stackoverflow, I was able to create this script:
var getRandomInRange = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
$('.media-box').each(function() {
var mediaBox = $(this);
var mask = mediaBox.find('.mask');
var hue = 'rgb(' + getRandomInRange(100, 255) + ',' + getRandomInRange(100, 255) + ',' + getRandomInRange(100, 255) + ')';
mask.css({
backgroundColor : hue,
opacity : 0.7
});
mediaBox.hover(function() {
mask.stop(true, true).fadeIn();
}, function() {
mask.stop(true, true).fadeOut();
});
});
You can view the fiddle link here
I wanted more bright colors and less grey ones, so I attempted to switch from RGB values to HSL values in the CSS background.
The updated script looked like this:
var getRandomInRange = function(min, max) {
return Math.floor(Math.random() * (max - min + 1), 10) + min;
};
$('.media-box').each(function() {
var mediaBox = $(this);
var mask = mediaBox.find('.mask');
var hue = 'hsl(' + getRandomInRange(0, 360) + ',' + getRandomInRange(70, 100) + '%' + getRandomInRange(45, 55) + '%)';
mask.css({
backgroundColor: hue,
opacity: 0.7
});
mediaBox.hover(function() {
mask.stop(true, true).fadeIn();
}, function() {
mask.stop(true, true).fadeOut();
});
});
Updated working Fiddle: here
(I'm specifically looking for a script that focuses on this task rather than converting all RGB values to HSL)