Take a look at this FIDDLE Link.
I'm facing an issue where the animation works smoothly in Firefox, but it's not functioning as expected in Chrome.
Kindly open the fiddle in both browsers (Chrome and Firefox), hover over the image, and notice the difference.
Here is the CSS stylesheet:
===================================
.portfolio_container {
position:relative;
display:block;
overflow:hidden;
width:100%;
}
.portfolio_container .portfolio {
position:relative;
display:block;
float:left;
overflow:hidden;
width:25%;
height:auto;
}
.portfolio_container .portfolio .media_box figure a img {
display:block;
margin-left: auto;
margin-right: auto;
}
.portfolio_container .portfolio .media_box .hover_effect {
top:0;
left:0;
}
.thumbLink {
display: block;
width: 100%;
}
... (CSS continues)
and this is my HTML:
<section class="portfolio_container">
<article class="portfolio">
<section class="thumbImage">
<img src="http://html5css3templates.com/themes/surrealstudio/templates/images/gallery/gallery-04-thumb.jpg" alt="">
... (HTML code continues)
</section>
</article>
</section>
Your assistance on this matter would be greatly appreciated.
Thank you!
- Vikas