Take a look at Demo Gallery
I'm encountering some bugs that I can't seem to resolve.
- In Safari, there's a flickering issue when hovering over other elements
- In Safari and Chrome, the images are not displaying at the correct size (270x128) - only Firefox shows them correctly
- In Firefox, the fadeout effect is not as smooth as desired
CSS code:
div li img{
width: 270px;
height: 128px;
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 1; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
box-shadow:0px 20px 10px -15px #000;
}
img:hover {
-webkit-transform:scale(0.85); /*Webkit Scale version*/
-moz-transform:scale(0.85); /*Mozilla scale version*/
-o-transform:scale(0.85); /*Opera scale version*/
box-shadow:0px 0px 30px #000; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px #000; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px #000; /*Mozilla shadow version*/
opacity: 1;
}
.overlay {
position: absolute;
margin-top: -190px;
height: 200px;
width: 220px;
z-index: 9999;
background-color: red;
opacity: 0;
}
div li {
float: left;
padding: 1px;
width: 270;
height: 128px;
}
.darken {
filter: alpha(opacity=1); /* internet explorer */
-khtml-opacity: 0.1; /* khtml, old safari */
-moz-opacity: 0.1; /* mozilla, netscape */
opacity: 0.2; /* fx, safari, opera */
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-in, ease-out;
}
.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%);
}
This is my jQuery code:
$("#all").on("click", { name: "All" }, activateCategory);
$("#eating").on("click", { name: "Food Drinks" }, activateCategory);
$("#it").on("click", { name: "IT Technology" }, activateCategory);
$("#celebrate").on("click", { name: "Invite Celebrate" }, activateCategory);
$("#education").on("click", { name: "Education Culture" }, activateCategory);
function activateCategory(event) {
if (event.data.name != "All") {
$('li').each(function() {
//alert("Event: " + event.data.name + "\nTag: " + $(this).data('tags'));
if ($(this).data('tags') != event.data.name) {
//alert("Hit in Category " + event.data.name);
$(this).stop(true,true).addClass("darken",100);
$(this).append('<div class="overlay"></div>');
}
else {
$(this).stop(true,true).removeClass("darken",100);
$(this).find('div').remove();
}
});
}
else {
$('li').each(function() {
$(this).removeClass("darken",100);
$(this).find('div').remove();
});
}
}
If anyone could offer assistance with these issues, it would be greatly appreciated.