Feeling a sense of fear about the outcome, I am in the process of creating a small website that includes animations, CSS 3D transforms, and some jQuery elements.
The code is too lengthy to include here, so I have created this jsfiddle for reference.
The structure itself is quite simple, as shown below (with vendor-prefixes omitted for clarity):
<section>
<article>
<h1>2012</h1>
</article>
<article>
<h1>2013</h1>
</article>
</section>
.article {
position: absolute;
width: 370px;
height: 250px;
margin-bottom: 120px;
background-size: cover;
background-position: center;
border-radius: 10px;
background: grey;
z-index: 50;
box-shadow: -5px 0 3px -4px rgba(0, 0, 0, 0.6);
-webkit-box-reflect: below -10px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.2) 0%, transparent 40%, transparent 100%);
transition: margin-top 0.3s, width 0.3s, height 0.3s, -webkit-transform 0.3s, top 0.3s, left 0.3s;
transform: perspective(900px) rotateY(25deg) translateZ(-90px);
}
section article:hover {
margin-top: -30px;
width: 430px;
height: 310px;
cursor: pointer;
box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.2);
transition: all 0.8s;
transform: perspective(100px) rotateY(0deg) translateZ(0);
}
The issue I'm facing is that the :hover effect sometimes works and other times it does not. It appears that at times another element is positioned over the article, even though there are no additional elements. Even adding z-index or using the class .activo after clicking an article doesn't solve the issue. The problem persists regardless. Sometimes it works fine, while other times it does not...
Please try accessing the sample link and reload it multiple times. This issue occurs across Safari, Chrome, and Firefox browsers, although Firefox seems to handle it slightly better.
I've noticed that the hover function operates correctly if, during page loading, I quickly move my mouse to the article elements. However, if I wait until the page fully loads before hovering, the effect fails to trigger.
Additionally, I've implemented a bit of jQuery to shift sibling articles when one is hovered. Since the articles are absolutely positioned and expand to cover the entire body upon clicking, JavaScript is necessary to reposition them accurately.
$('article').hover(function (event) {
$(this).nextAll('article').each(function () {
izquierda = izquierda_original[$(this).attr('id')].izquierda + 360;
$(this).css('left', izquierda + 'px');
});
}, function (event) {
$(this).nextAll('article').each(function () {
izquierda = izquierda_original[$(this).attr('id')].izquierda;
$(this).css('left', izquierda + 'px');
});
});
The object izquierda_original[] stores the original left values for each element.
Thank you in advance for any assistance provided.
EDIT: After further investigation, I've discovered that the issue lies with the body element. When the height of the body exceeds that of the articles, the hover effect ceases to function properly. This behavior is particularly peculiar, as it's almost as if the body element takes precedence over its child elements.