When I hover over the image, it zooms, but when i hover over the caption, the zoom resets. Its like the absolute positioned element registers a mouseout.
.tint {
overflow: hidden;
float: left;
background-color:#111;
margin: 0 20px 20px 0;
}
figure {
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 20px 20px 0;
}
figcaption {
position: absolute;
width:75%;
color: white;
padding: 5px;
opacity: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
font-family:Cachet;
text-align:center;
z-index:1000;
}
figure:hover figcaption {
opacity: 1;
}
figcaption:hover
{
}
figure:before {
position: relative;
font-weight: 800;
background: black;
background: rgba(255,255,255,0.75);
text-shadow: 0 0 5px white;
color: black;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
-moz-transition: all 0.6s ease;
opacity: 0.75;
}
figure:hover:before {
opacity: 0;
}
.cap-bot:before { bottom: 0%; left: 0%; }
.cap-bot figcaption { left: 15%; bottom: 0%;}
.cap-bot:hover figcaption { bottom: 30%;left:15%;}
.zoom
{
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
transition: transform 1s;
opacity: .5;
cursor: pointer;
]
.gallery_grid_image {
display: block;
-moz-transition: opacity .3s linear;
-webkit-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
transition: opacity .3s linear;
}
Any ideas? I am using Jquery to add the zoom class.
$(".comment_preview").on({
"mouseover" : function() {
$(this).find('.gallery_grid_image').addClass('zoom');
},
"mouseout" : function() {
$(this).find('.gallery_grid_image').removeClass('zoom');
}
});
