Update: you can test the hover / modal function by pasting this code into your console (right click page and chose "inspect"). It is a simple hover function and it opens single images on their entry page in a modal popup that is possible to decorate and to give fancy effects to but since I made it without access to the server and its css file I haven't made fun effects

1: go to http://photoshopcontest.com/view-entry/220528/fire-pit.html for instance

2: right-click on the page, whose "inspect", copy/paste this code minus the code tags into the console box at the bottom of the page and you will see a layer show up on the entry's image as you hover it, click it, that's all

I will try to make the same thing for entries, so once youget to PSC home, you browse entries with comments in such a modal popup MAYBE because it's not that great at all... please lemme know if you think of something

[code]/* PhotoshopContest.com - code by nicolas houllet(ledirlo psc user) Hover and modal image popup function */

$body = $("body");
$html = $("html");
$aimg= $html.find("a img").filter(function() {
return ($(this).attr('width') > 300) && ($(this).attr('height') > 300);
});
$imga=$($aimg).parent('a');$($imga).css('display','block');
$(
'<div class="zolayer clicky " style="display:none;position:absolute;background:#ffffffd6;"><div class="clicker clicky" style="display:none" class="zoborder"></div></div>'
)
.css("margin", "0")
.insertBefore($aimg);
$('.clicker').css('background-repeat','no-repeat').css('background-size','contain').css('left','0').css('right','0').css('width','70px').css('height','70px').css('color','black').css('position','absolute').css('top','calc(50%)').css('transform','translateY(-50%)').css('margin','0 auto').css('cursor','pointer').css('background-image','url("https://i.postimg.cc/xT2GqXyW/pscmag-s-blue.png")');


var zo=$('.zolayer');
var zoof = $(zo).parent();

$(zo).each(function () {
var zimg=$(this).next('img');
var zima=$(zimg).parent('a');
var aw =$(zimg).attr('width');
var ah=$(zimg).attr('height');
$(this).add(zima).attr('height', '' + ah + 'px').attr('width', '' + aw +'px').css('height', '' + ah + 'px').css('width', '' + aw + 'px');
$(zimg).css('margin','0');
});

function zoop() {

$(zoof).each(function () {

$(this)
.hover(
function (event) {

event.preventDefault();
$(this)
.find("img")
.removeClass("sharp")
.addClass("blur")
.parent('a').find(".zolayer,.zolayer .clicky")
.css("cursor", "pointer")
.fadeIn(100);

}, function () {
$(this)
.find("img")
.removeClass("blur")
.addClass("sharp")
.parent('a').find(".zolayer,.zolayer .clicky")
.removeClass("zoborder")
.fadeOut(10);
});

});
}
zoop();

/*MODAL*/

$(zo).each(function () {
var href = $(this).parent("a").attr("href");
$(this).attr('data-link',''+ href + '').parent('a').removeAttr('href');

$(this).add($(this).next(".clicker")).click(function (e) {
/*$prevent double click*/
var $link = $(e.target);
e.preventDefault();
if (
!$link.data("lockedAt") ||
+new Date() - $link.data("lockedAt") > 500
) {
/*$(ple).show().one();*/
$(this).next().click();
$(this).show()
/* hide clicker*/

/*$($body).add("#detail").removeClass("bsharp").removeClass("bsharpb").find(".zolayer,.clicker").off('click',zoop).fadeOut(400);
*/



var image = new Image();
var modal = $(".modal img")[0];
image.src = href;
$(".modal").remove();
$("html")
.append(
'<div class="modal" style="display:none;height:100%;width:100%;position:fixed;top:0;bottom:0;left:0;right:0;z-index:99999;background-color:#ffffffd6"><div class="modalbck"></div><div id="close" style="position: fixed;top: 15px;right: 30px;display: block;cursor: pointer;width: 150px;z-index: 9999999;height: 150px;transition: all 1s;background-position: center;transform: scale(.5);transform-origin: top right;"><div id="ca" style="position:inherit;display: block;background: url(https://i.postimg.cc/g2tyNd1s/close.png);background-repeat: repeat;height: inherit;width: inherit;background-repeat: no-repeat;"></div><div id="cb" style="position:inherit;display: block;background: url(https://i.postimg.cc/g2tyNd1s/close.png);background-repeat: repeat;height: inherit;width: inherit;background-repeat: no-repeat;"></div></div></div>'
)
.show()
.parent($html)
.find($body)
.css("overflow", "hidden");

$(".modal").addClass("swash").show().append(image);$('.modal img').css('margin','0 auto').css('max-height','97%').css('position','absolute').css('top','50%').css('transform','translateY(-50%)').css('-ms-transform','translateY(-50%)').css('right','0').css('left','0');

$(this).parent('a').removeAttr('href');

setTimeout(function () {
$($body).add('#detail').addClass("bblur");
}, 200);



/*CLOSE MODAL*/


$('.modal #close').hover(function(){

$('#close #ca').fadeOut(300).next('#cb').fadeIn(300);
$("html .modal #close").click(function () {
$(".modal").removeClass("swash");
$($body).add("#detail").removeClass("bblur").addClass("bsharp");
$(".modal").addClass("woosh");$('figure img').removeClass('loseit').addClass('sharp');
setTimeout(function () {
$(".modal").remove();
$($body).css("overflow-y", "auto");
}, 400);
});

},function(unglow){
$('#close #ca').fadeIn(300).next('#cb').fadeOut(300);
});


}
$link.data("lockedAt", +new Date());
});
});
[/code]