Question

大家好，新年快乐！我已经成功地在我的css中添加了以下图像悬停效果。我知道这适用于我网站上的所有图片。事实上它确实:-) 然而，一些图像，当悬停时超出他们的位置/位置。在某处我读到我必须将我的图像包含在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”。之后我补充说：溢出：隐藏这就是我现在所拥有的，但图像仍然从他们的位置出来。

.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”的类。这个容器有一个设置的高度和宽度，我给它overflow:hidden属性。这意味着图像将“放大”，但不会在此容器外“看到”。

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中，例如new_effect。然后，在css文件中，为该类添加新规则，它应该没问题。例如：

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脚本..一如既往，要求进一步的信息

悬停图像效果问题

3 个答案: