Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to make CSS image hover effect AJAX compatible?


Question

Site URL: http://herzbergdesign.com

Hi all,

I'm working on the website for my design business (not web design, obviously), and am having a small issue.
I am using custom images with click-through links, and added a piece of CSS I found online that expands these images when you hover over them (using them on home page as well as a few others).
The issue is that they only work after a few page reloads (or very specifically, reloading the "branding" page will make them work throughout the website). After some thorough Googling, I am under the impression that this has to do with AJAX loading. I'd rather not turn this off just to make some dumb CSS animations work. Is there an easy way to make this work? Here's the code:

a img.thumb-image {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
           transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
       -moz-osx-font-smoothing: grayscale;
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
   -webkit-transition-property: transform;
           transition-property: transform;
 }
 a img.thumb-image:hover,
 a img.thumb-image:active {
   -webkit-transform: scale(1.1);
           transform: scale(1.1);
 }

 

Link to comment

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...