you need to code to patterns more. first of all - you have a relationship of 2 elements - a containing div and an image.
your event is actually on the parent el but you also need to reference and animate the inner element (the image).
your selector is simply div.item-port > img
if you want to grab all images. div.item-port > img ! div.item-port
will grab the parent divs instead of those that have an image as direct child only. etc.
then you need to decide what element to attach the event to. you have many choices in your markup.
before you even get there, you have a a href which wraps BOTH your elements. that allows you to use a cross-browser :hover pseudo.
you can very easily do in pure css:
div.port-item {
/* defaults you already have and then ... */
background-position: 175px -78px;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
-ms-transition: all 0.2s ease-out 0s;
-o-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}
.portfolio-item a:hover div.port-item {
background-position: 175px 90px;
}
.portfolio-item a:hover img {
opacity: .15; // etc for cross-browser
}
only if you want to recover when the browser does not support transitions, you should instantiate your js class. http://jsfiddle.net/wMnzb/4/
var Magnify = new Class({
Implements: [Options],
options: {
parent: 'div'
},
initialize: function (images, options) {
this.setOptions(options);
this.elements = document.getElements(images);
this.attachEvents();
},
attachEvents: function () {
var selector = this.options.parent;
this.elements.each(function (el) {
var parent = el.getParent(selector);
parent.set('tween', {
duration: '250',
link: 'cancel'
});
parent.addEvents({
mouseenter: function () {
this.tween('background-position', '175px 90px');
el.fade(0.15);
},
mouseleave: function () {
this.tween('background-position', '175px -78px');
el.fade(1);
}
});
});
}
});
new Magnify('div.port-item > img');
simplified as much as is feasible, but you get the idea - completely ambiguous from ids and any such repetitive specificity.