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*=".."] { transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; 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); filter: grayscale(35%); filter: grayscale(.35); filter: grayscale(.35); filter: grayscale(.35); } img[alt*=".."]:hover{ transform: scale(1.2); transform: scale(1.2); transform: scale(1.2); transform: scale(1.2); transform: scale(1.2); transform: scale(1.2); //opacity: 1 !important; filter: grayscale(0); filter: grayscale(0%); filter: grayscale(0); filter: grayscale(0); filter: grayscale(0); } // Zoom out and desaturate img[alt*=".:"] { transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; 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); transform: scale(1.2); transform: scale(1.2); transform: scale(1.2); transform: scale(1.2); transform: scale(1.2); filter: grayscale(0); filter: grayscale(0%); filter: grayscale(0); filter: grayscale(0); filter: grayscale(0); } img[alt*=".:"]:hover{ transform: scale(1); transform: scale(1); transform: scale(1); transform: scale(1); transform: scale(1); transform: scale(1); //opacity: 1 !important; filter: grayscale(.35); filter: grayscale(35%); filter: grayscale(.35); filter: grayscale(.35); filter: grayscale(.35); } // Slide img[alt*=".-"] { margin-left: 0px; transition: margin 1s ease; transition: margin 1s ease; transition: margin 1s ease; transition: margin 1s ease; transition: margin 1s ease; } img[alt*=".-"]:hover{ margin-left: -200px; } // Blur img[alt*=".+"] { transition: all .5s ease; transition: all .5s ease; transition: all .5s ease; transition: all .5s ease; transition: all .5s ease; } img[alt*=".+"]:hover{ filter: blur(5px); filter:blur(5px); filter: blur(5px); filter: blur(5px); filter: blur(5px); } // Grey to colour img[alt*="./"] { filter: grayscale(100); filter: grayscale(100%); filter: grayscale(100); filter: grayscale(100); filter: grayscale(100); transition: all 1s ease; transition: all 1s ease; transition: all 1s ease; transition: all 1s ease; transition: all 1s ease; } img[alt*="./"]:hover{ filter: grayscale(0); filter: grayscale(0%); filter: grayscale(0); filter: grayscale(0); filter: grayscale(0); }