mouse rollover inner image enlarge/no-div-resize

Hello there,

.ten_thousand{
scale:10000%;
}

I am not on here often, actually I do multimedia work in my spare time at the moment... the point is that I feel a tiny bit guilty about not contributing to 'ozzu' enough however, I believe this source will be a good one, if it is possible!

Using CSS, I want to enlarge/zoom in on my thumbnails upon mouse over, without a pop up, or resizing my div tag. So the image frame (div) stays the same size but only the image becomes larger and within that setup div.

I have found this possible with flash however I am not sure if it is even possible with css. So...what do you think?

<end id="thanks" class"ten_thousand">Many thanks in advance</end>

Kind regards

Cosmic Bullion

Read through this. I think with a little customization, it might be the solution you're wanting.

html-tutorials/tutorial-creating-hover-effect-elements-using-css-t97597.html

Yes, very nice solution natas.

I like what you have done there. However I forgot to mention that I am looking for that enlarge/zoom transition, that specific smooth transition effect..

Although I think the instant image swap is a good idea in its own right, it is not quiet what I am looking for. Although I may have completely understood what you mean by a little customisation.

If I may, I have found a sample website that uses flash to create the exact transition I am looking for, you can find the reference on on..house of orange dot netherlands (nl)

I am looking for this sort of effect in css, if possible..

As as 'side show'...but to distract from the initial subject: The actionscript used in this particular website mentioned above, used random image load (size and all) and is quite effective, ..and am wondering if it is also possible on css?

Ciao

Regards

Comsic Bullion

What you want to do shouldn't be too difficult using CSS3. However a small caveat before getting started is that this will only work in the more recent versions of mozilla/webkit browsers since it uses the vendor specific css3 selectors. If you need it to work in more browsers, you'll want to use a javascript library like jQuery to achieve the affect.

So here's the HTML. I'm using a div but you can replace that with an image just make sure you change the selector in the css as well


And the CSS

The important parts here are the position attributes on both the object and the parent and then the z-index on hover. The transform's achieve the scale using 1.0 = 100%, 1.5 = 150%, etc. You could also animate the scale in webkit browsers with the -webkit-transition property but thats another post entirely.