Jump to content

How to make CSS image hover effect AJAX compatible?

Recommended Posts

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
  • Replies 1
  • Views 446
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.