http://static1.squarespace.com/static/55ca2caee4b05006bdcbb21d/t/56b90fdb01dbae64ff709dbe/1454968795939/Untitled-3.png// 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.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); //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); } // 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); } // Blur Reverse img[alt*=".-"] { filter: blur(2px); -webkit-filter:blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); } img[alt*=".-"]:hover{ -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; filter: blur(-2x); -webkit-filter:blur(-2px); -moz-filter: blur(-2px); -o-filter: blur(-2px); -ms-filter: blur(-2px); } // 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); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } // Grey to Color AND Opacity change img[alt*=".)"] { filter: grayscale(100); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100); -o-filter: grayscale(100); -ms-filter: grayscale(100); opacity: 0.8 !important; -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); opacity: 1 !important; } // Opacity Change AND Zoom in img[alt*="/dj/"] { -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.8 !important; } img[alt*="/dj/"]:hover{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); opacity: 1 !important; }