CSS only thumbnail slider

I'm trying to make a thumbnail which on hover will move it's image (that's longer that the wrapper) all the way to the left using only css and using the img element and not a div with background-image.

The problem I have is that i don't know how could I find how much to move it given the fact that the images have different widths.

I did a demo where the left image moves correctly because I calculated how much it needs to be moved and the right image with the same css moving incorrectly: http://jsfiddle.net/g5JGd/1

Answers


It's not clear why you're restricting yourself to manipulating the img element alone and not exploring more usual background-image sprite-like hover event manipulations.

Take a look at this Codrops article and their demo's here (note there are 5 demo's in the menu).

The techniques offered don't produce the exact end result you're after, but they do include the structure for the type of events and manipulations you'd need to use.


Need Your Help

Adobe AIR on Android communicating with native Android activity

android actionscript-3 air android-activity

I am working on an Adobe AIR app that will run on Android devices. The current issue I am facing is that I have received a jar file that contains an Android Activity that launches the camera, recog...

Android | Fragment navigation triangle

android android-fragments navigation

I have what I think is a relatively simple problem. I got just one activity with three fragments in it (showing only one at a given time). So, these are my fragments

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.