Question

我知道之前已经回答过类似的问题，但我找不到我想要的东西。

我正在尝试在此page上重新创建页脚图像。我已经完成了悬停效果，但是我无法将图像缩放到与该网站上相同的大小。

有人会对如何使图像看起来完全一样有任何想法吗？

这是jsdfiddle中的内容（由于某种原因，悬停效果在jsfiddle中不起作用）。下面的代码是我正在使用的代码

$(".img_Fade").hover(
  function () {
    $(this).fadeTo("slow" , 1);
  },
  function () {
   $(this).fadeTo("slow" , .5);
  }
);

Answer 1

我将jQuery添加到你的小提琴中（这就是为什么渐弱不起作用）并将overflow: hidden添加到你的三个<div>元素中。这将隐藏图像的溢出部分。

您是否还需要它们随着屏幕高度而缩放？

http://jsfiddle.net/borglinm/3fmPU/1/

Answer 2

使用以下css：

.insideDiv1:hover, .insideDiv2:hover, .insideDiv3:hover{
opacity:1.0;
}

.insideDiv1{ background-color: blue;}
.insideDiv2{ background-color: orange;}
.insideDiv3{ background-color: green;}

.insideDiv1, .insideDiv2,.insideDiv3 {
  opacity:0.5;
  float: left;
  background-color: blue;
  width: 33%;
  height: 100%;
  border: 0px;
  margin: 0px;
  padding: 0px;
  filter:alpha(opacity=50); /* For IE8 and earlier */
}

希望这会有所帮助..

Answer 3

你不需要javascript / jquery：

这是你更新的小提琴=＆gt; http://jsfiddle.net/LxcVv

我刚刚在您的.img_fade类上添加了悬停状态，并使用了css过渡：

.img_Fade {
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
    width: 100%;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    -webkit-backface-visibility: hidden; /* to fix chrome moving image issue */
}

.img_Fade:hover {
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

（我还将图片width设置为100%以使其适合他们的容器）

使用jQuery缩放相对于用户屏幕大小的图像

3 个答案: