css3鼠标经过图片放大效果 css鼠标经过图片特效

如何实现类似淘宝网上鼠标经过商品时放大图片的效果。

1、只要制做的宝贝主图尺寸大于700*700（像素），上传以后魔法放大镜就会自动现身，宝贝就自动会有放大镜的功能，鼠标移动到哪，哪就自动放大。

2、有两种放大的方式：使用原图放大、用已经放大的新图片。原图放大的好处是只需加载一个图片，而使用新图片就可以得到更清晰的效果。

3、scale()可以实现按比例放大或者缩小功能。CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

相关问答

Q1: css鼠标放上去图片变大

要实现鼠标放在block上以中心为原点进行放大，可以利用CSS3的transform和transition来实现 CSS3的transform： scale()可以按比例放大或缩小block的功能。

如果直接设置背景opacity值为0.8，会使文字的颜色发生改变。解决方法就是在设置背景色时使用rgba(red，green，blue，opacity)来对背景色进行设置，这样就可以单独的改变背景的透明度，而不会影响到里面的内容(包括文字和图片)。

你为这个呀，可以到是可以。只不过在ie6及其以前的版本上是不可以的。给你一个代码，你自己看吧。把自己的图片换一下就可以了。

Q2: CSS3设计网页怎么放大背景图片。

CSS1 之前是不能设置背景图大小的，CSS3就可以通过background-size来设定图片大小，可以是像素或者是百分比。例如background-size：100px 200px；表示把背景图片大小调整为100x200px。

：一个很小的条状图，通过repeat后，形成一个很规则的大图背景。 但是css3出现以后，这个情况被改善了。background-size 属性可以让我们之前的希望成真。而且这个属性在firefox，chrome，以及ie9上都可以使用。

首先，打开html编辑器，新建html文件，例如：index.html。在index.html中的标签中，输入css代码：body{background： url(image.jpg) no-repeat；background-size： 200px 200px； }。

再给子盒子添加缩放（transform：scale(2)），即可实现放大功能。由于背景图无法设置透明度，所以使用body的伪元素，给伪元素添加背景图和opacity属性。

css2中是无法控制背景图片大小的，如果想实现这种效果，只能是更改图片了。css3中可以通过background-size来控制图片的大小。

Q3: css如何实现鼠标移至图片上显示遮罩层及文字

．首先，看一下HTML，一个img图像控件和一个带有样式的div，其中包含文本。这个就是蒙版遮罩层。2．然后，查看样式定义。先检查图像容器和图像样式，如图所示。

打开dw软件并创建一个新文档。在dw中，编写以下css样式： .mengsb {width：648px； margin：0px auto；}.jixing1 a {position：relative； width：320px； margin：0 0px 0 0； float：left； height：232px；}。

div代码： 遮罩层 你需要做的就是给遮罩层的图片价格透明度的背景图片。

首先，我们应该先给div设置宽度和高度，保证文字有一个范围。然后通过background给div添加一张图片作为它的背景。接着可以通过url()来连接图片，url里面放置的就是背景图片的路径。

新建一个html文件，命名为test.html。在test.html文件内，创建一个div模块，下面将使用css设置该div的样式，实现鼠标移到div上显示手型。

在img标签里写alt属性，alt里的内容就是当鼠标停留在图片时显示的内容。

Q4: 网站上当鼠标经过一张图片时图片放大怎么制作

1、将鼠标放在背景副本层和椭圆层中间，按一下alt键创建剪切蒙版。或者用鼠标左键点击背景副本，选择创建剪切蒙版。将图层副本利用ctrl+t放大，把想要放大的局部对准椭圆，就能轻松实现想放大哪里就放大哪里的小梦想。

2、分别写一个onmouseover和onmouseout事件。然后在事件里面加一个function，分别写想要放大的尺寸和缩小或复原的尺寸。

3、给图片加一个onMouseOver和onMouseOut事件就可以做到。 例： function ShowDiv(pic) { divPic.innerHTML= divPic.style.display=block //还可以让div跟着图片所在的当前窗体位置居中，代码略。

css3鼠标经过图片放大效果的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css鼠标经过图片特效、css3鼠标经过图片放大效果的信息别忘了在本站进行查找喔。