Squarespace CSS rollover effects triggered by character sequences in ALT tags

More in Plugins, Scripting and Styling

A few weeks ago I devised an easy way to create a custom image rollover effect using just css.

The effect needed to be targetted to specific images on a page, so I devised a way of triggering the rollover only if the image's ALT tag contained a specific character sequence. 

Then it struck me that the idea could be expanded so that you have multiple rollover effects, each triggered by a different ALT tag character sequence.

---

This is a FREE add on

This add on is FREE to use on any website, including commercial sites that you may build for clients,  so long as you don't resell it as a product or part of a bundle of products.

---

The Method

It's really easy.. ..simply paste the code below into your custom css and use the following character sequences in image ALT tags to trigger the rollover effects.

Check out this video that shows you how easy it is to add the rollovers to your images

---

Here are the shortcode character sequences

.. = Zoom in & saturate
.: = Zoom out & desaturate
.- = Slide left
.+ = Blur
./ = Greyscale to full colour

---

And here's the CSS code

// Zoom in and saturate
img[alt*=".."] 
{
   -webkit-transition: all 200ms ease-in-out;
     -moz-transition: all 200ms ease-in-out;
      -ms-transition: all 200ms ease-in-out;
       -o-transition: all 200ms ease-in-out;
          transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
 // opacity: 0.7 !important;
  filter: grayscale(.35);
    -webkit-filter: grayscale(35%);
  -moz-filter: grayscale(.35);
  -o-filter: grayscale(.35);
  -ms-filter: grayscale(.35);

  
}

img[alt*=".."]:hover{
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform:    scale(1.2);
  -ms-transform:     scale(1.2);
  -o-transform:      scale(1.2);
  transform:         scale(1.2);
  //opacity: 1 !important;
   filter: grayscale(0);
      -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);
  
}


// Zoom out and desaturate
img[alt*=".:"] 
{
   -webkit-transition: all 200ms ease-in-out;
     -moz-transition: all 200ms ease-in-out;
      -ms-transition: all 200ms ease-in-out;
       -o-transition: all 200ms ease-in-out;
          transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
 // opacity: 0.7 !important;
transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform:    scale(1.2);
  -ms-transform:     scale(1.2);
  -o-transform:      scale(1.2);
  transform:         scale(1.2);
  
 filter: grayscale(0);
      -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);
  

  
}

img[alt*=".:"]:hover{
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform:    scale(1);
  -ms-transform:     scale(1);
  -o-transform:      scale(1);
  transform:         scale(1);
  //opacity: 1 !important;
   filter: grayscale(.35);
    -webkit-filter: grayscale(35%);
  -moz-filter: grayscale(.35);
  -o-filter: grayscale(.35);
  -ms-filter: grayscale(.35);
  
  
}

// Slide 
img[alt*=".-"] 
{
 margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

img[alt*=".-"]:hover{
   margin-left: -200px;
}


// Blur
img[alt*=".+"] 
{

  -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
       -o-transition: all .5s ease;
      -ms-transition: all .5s ease;
          transition: all .5s ease;
}

img[alt*=".+"]:hover{
   filter: blur(5px);
      -webkit-filter:blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
 
}

// Grey to colour
img[alt*="./"] 
{
   filter: grayscale(100);
      -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100);
  -o-filter: grayscale(100);
  -ms-filter: grayscale(100);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

img[alt*="./"]:hover{
   filter: grayscale(0);
      -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);
 
}