Here is the code that seems to only function properly in jsfiddle, but doesn't work when used in browsers:
http://jsfiddle.net/5r6mx/18/ Here is the code that I am using in the browser, which can also be found in the jsfiddle link above:
// JavaScript
$(document).ready(function() {
$(".image_stack").delegate('img', 'mouseenter', function() {
if ($(this).hasClass('stackphotos')) {
var $parent = $(this).parent();
$parent.find('div.namehover').addClass('rotate3');
$parent.find('div.namehover').css("left","77px");
$parent.find('img#photo1').addClass('rotate1');
$parent.find('img#photo2').addClass('rotate2');
$parent.find('img#photo3').addClass('rotate3');
$parent.find('img#photo1').css("left","150px");
$parent.find('img#photo3').css("left","50px");
}
})
.delegate('img', 'mouseleave', function() {
$('img#photo1').removeClass('rotate1');
$('img#photo2').removeClass('rotate2');
$('img#photo3').removeClass('rotate3');
$('div.namehover').removeClass('rotate3');
$('div.namehover').css("left","");
$('img#photo1').css("left","");
$('img#photo3').css("left","");
});;
});
HTML
<div style="border:0px;clear:both;padding-bottom:240px;">
<div class="image_stack" style="margin-left:0px;" >
<img id="photo1" class="stackphotos" src="http://www.commentsyard.com/cy/01/6474/Mixed%20Flowers%20and%20a%20Bear.jpg" >
<img id="photo2" class="stackphotos" src="http://www.commentsyard.com/cy/01/6474/Mixed%20Flowers%20and%20a%20Bear.jpg" >
<img id="photo3" class="stackphotos" src="http://www.commentsyard.com/cy/01/6474/Mixed%20Flowers%20and%20a%20Bear.jpg" >
<div class="namehover"> Perfumes</div>
</div>
CSS
.image_stack img { /* CSS style for photo stack */
border: none;
text-decoration: none;
position: absolute;
margin-left:0px;
width: 170px;
height: 180px;
}
.image_stack { /* CSS style for photo stack */
width: 200px;
position: relative;
padding-left:20px;
margin-bottom:40px;
float:left;
}
.image_stack img { /* CSS style for photo stack */
position: absolute;
border: 4px solid #FFF;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
z-index: 9999;
/* Firefox */
-moz-transition: all 0.2s ease;
/* WebKit */
-webkit-transition: all 0.2s ease;
/* Opera */
-o-transition: all 0.2s ease;
/* Standard */
transition: all 0.2s ease;
}
.image_stack #photo1 { /* Position of last photo in the stack */
top: 8px;
left: 108px;
}
.image_stack #photo2 {/* Position of middle photo in the stack */
top: 6px;
left: 104px;
}
.image_stack #photo3 {/* Position of first photo at the top in the stack */
top: 4px;
left: 100px;
right: 100px;
}
.image_stack .rotate1 {/* Rotate last image 15 degrees to the right */
-webkit-transform: rotate(15deg); /* Safari and Chrome */
-moz-transform: rotate(15deg); /* Firefox Browsers */
transform: rotate(15deg); /* Other */
-ms-transform:rotate(15deg); /* Internet Explorer 9 */
-o-transform:rotate(15deg); /* Opera */
}
.image_stack .rotate2 {/* CSS not used */
-webkit-transform: rotate(0deg); /* Safari and Chrome */
-moz-transform: rotate(0deg); /* Firefox Browsers */
transform: rotate(0deg); /* Other */
-ms-transform:rotate(0deg); /* Internet Explorer 9 */
-o-transform:rotate(0deg); /* Opera */
}
.image_stack .rotate3 {/* Rotate first image 15 degrees to the left */
-webkit-transform: rotate(-15deg); /* Safari and Chrome */
-moz-transform: rotate(-15deg); /* Firefox Browsers */
transform: rotate(-15deg); /* Other */
-ms-transform:rotate(-15deg); /* Internet Explorer 9 */
-o-transform:rotate(-15deg); /* Opera */
cursor: pointer;
}
.namehover {
position:absolute;
left:105px;
top:167px;
z-index:99999;
display:block;
background:#333;
color:#fff;
width:169px;
}