mouse rollover inner image enlarge/no-div-resize

  • cosmic_billion
  • Newbie
  • Newbie
  • User avatar
  • Posts: 14
  • Loc: Amsterdam, the Netherlands

Post 3+ Months Ago

Hello there,


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
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

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

  • cosmic_billion
  • Newbie
  • Newbie
  • User avatar
  • Posts: 14
  • Loc: Amsterdam, the Netherlands

Post 3+ Months Ago

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 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?



Comsic Bullion
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1825
  • Loc: In the Great White North

Post 3+ Months Ago

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
HTML Code: [ Select ]
<div class="imageContainer">
   <div class="imageExample">&nbsp;</div>
  1. <div class="imageContainer">
  2.    <div class="imageExample">&nbsp;</div>
  3. </div>

And the CSS
CSS Code: [ Select ]
.imageContainer {position:relative; border: 1px solid #333333;}
   .imageExample {height: 50px; width: 50px; position: relative; margin: 20px; background: blue; }
   .imageExample:hover {z-index:10; -moz-transform: scale(1.75); -webkit-transform: scale(1.75); transform: scale(1.75);}
  1. .imageContainer {position:relative; border: 1px solid #333333;}
  2.    .imageExample {height: 50px; width: 50px; position: relative; margin: 20px; background: blue; }
  3.    .imageExample:hover {z-index:10; -moz-transform: scale(1.75); -webkit-transform: scale(1.75); transform: scale(1.75);}

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.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 18 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.