Hover images effect issue

Question

Hello all and Happy New Year! I have succesfully added in my css the following image hover effect. I understand that this is applying in all images on my site. In fact it does :-) However some images , when hovering are getting outside their place/position. Somewhere I read that I have to include my images in a div. But how can I do that with my all images and where should I put that code? My site is in joomla 3.3 I tried to put the div code in index.php but with no luck. Please excuse me for my ignorance. I learn fast though :-)

EDIT: I would like to be more specific. I would like to have the hover effect in a joomla module. It displays news articles with images. I noticed this code in the module.

<div class="image">
<img src="<?php echo $items[$i]->image;?>" alt="<?php echo $items[$i]->title;?>">
</div>

So I think that images are included in a div. Am I right with that? And I replaced in the first css the "img" with "image". And I added after that the overflow:hidden That's what I have right now, but images are still getting out from their place.

.image{
    -webkit-transition: all 800ms ease; /* Safari and Chrome */
    -moz-transition: all 800 ease; /* Firefox */
    -o-transition: all 800ms ease; /* IE 9 */
    -ms-transition: all 800ms ease; /* Opera */
    transition: all 800ms ease;
}
.image:hover{
    -webkit-transform:scale(1.20); /* Safari and Chrome */
    -moz-transform:scale(1.20); /* Firefox */
    -ms-transform:scale(1.20); /* IE 9 */
    -o-transform:scale(1.20); /* Opera */
     transform:scale(1.20);
}
.image{overflow:hidden;}

Where am I wrong?

Answer 1

I saw now your edits (sorry, for the late answer). I will respond here because i can't in the main question. What you need to do is add another class to the div that contains the image, for example new_effect. Then, in the css file, add new rules for that class, and it should be ok. For example:

HTML:

<div class="image new_effect"> <!--this div has 2 classes-->
  <img src="<?php echo $items[$i]->image;?>" alt="<?php echo $items[$i]->title;?>">
</div>

CSS:

.new_effect{
  overflow: hidden;
}

.new_effect img{
  -webkit-transition: all 800ms ease; /* Safari and Chrome */
  -moz-transition: all 800 ease; /* Firefox */
  -o-transition: all 800ms ease; /* IE 9 */
  -ms-transition: all 800ms ease; /* Opera */
  transition: all 800ms ease;
}
.new_effect img:hover{
  -webkit-transform:scale(1.20); /* Safari and Chrome */
  -moz-transform:scale(1.20); /* Firefox */
  -ms-transform:scale(1.20); /* IE 9 */
  -o-transform:scale(1.20); /* Opera */
   transform:scale(1.20);
} 

You shouldn't need any jquery script.. as always, ask for further info