silvabokis

squarespace development + strategy + UX + design & build + marketing

+44 (0)7908 262225

I'm a freelance user experience consultant who delivers projects large and small for a client base that includes multinationals, SMEs, and sole traders.   
I specialise in formulating new media strategy, defining information architecture, user experience design, interaction design, prototyping, user research & testing, website and application building, and online marketing. 

Squarespace CSS rollover effects triggered by character sequences in ALT tags

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);
 
}