悬停图片效果问题

Question

大家好，新年快乐！我已经在我的 css 中成功添加了以下图像悬停效果。我知道这适用于我网站上的所有图片。事实上它确实如此:-) 然而，一些图像在悬停时超出了它们的 place/position。我在某处读到我必须将我的图像包含在 div 中。但是我怎样才能对我的所有图像执行此操作以及我应该将该代码放在哪里？我的网站在 joomla 3.3 我试图将 div 代码放入 index.php 但没有成功。请原谅我的无知。不过我学得很快:-)

编辑：我想更具体一点。我想在 joomla 模块中有悬停效果。它显示带有图像的新闻文章。我注意到模块中的这段代码。

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

所以我认为图像包含在 div 中。我说得对吗？我将第一个 css 中的 "img" 替换为 "image"。然后我添加了 overflow:hidden 这就是我现在所拥有的，但图像仍然从他们的位置出来。

.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;}

我哪里错了？

Answer 1

如果你把图像放在 div 中，就像这个例子：

css:

div{
    overflow:hidden;
    width: 300px; 
    height: 450px;
}

html:

<div>
    <img src="http://www.libertyscentre.co.uk/Owls/large/Collared%20Scops%20Owl.jpg" width="300">
</div>

FIDDLE: http://jsfiddle.net/myh8qz2s/

该元素将占据相同的位置。

重要编辑

如果图片太多，你不想把所有的图片都包起来，你可以使用这个简单的jquery脚本：

$(function(){
   $("img").each(function(){  //runs trough all the images
     height = $(this).height();  //get height of the current image
     width = $(this).width();    //get width of the current image


     $(this).wrap('<div class="container" style="width:'+width+'px; height:'+height+'px;"></div>');  //wraps the current image in a div of same height and width *check also the css for the class container

    });

});

NEW FIDDLE：（css与之前相同）

http://jsfiddle.net/myh8qz2s/1/

欢迎提问

Answer 2

您可以尝试使用 transform-origin: center 属性。这显示在第一张图片中 - see more

在第二张图片中，我将图片包裹在一个 div 和一个名为 'container' 的 class 中。这个容器有设定的高度和宽度，我给了它overflow:hidden属性。这意味着图像将 'enlarge'，但不会 'be seen' 在此容器之外。

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;
}
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);
  
  
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}



.container {
  overflow: hidden;
  height:300px;
  width:200px;
}

<img src="https://placekitten.com/g/200/300" alt="" />




<div class="container">
  <img src="https://placekitten.com/g/200/300" alt="" />
</div>

Answer 3

我现在看到了您的编辑（抱歉，回答晚了）。我会在这里回复，因为我不能回答主要问题。您需要做的是在包含图像的 div 中添加另一个 class，例如 new_effect。然后，在 css 文件中，为 class 添加新规则，应该就可以了。例如：

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);
}

您不需要任何 jquery 脚本..一如既往，询问更多信息

悬停图片效果问题

Hover images effect issue

css

google-chrome

mousehover