csshover图片放大 的图片

用css的 a:hover img 放大图片时怎么让放大后的图片 从原图片的中心放大

用CSS3中的transfrom:scale{x,y}来放大,如下:

《style》

*{margin:0;padding:0;}

div{border:solid 1px #333;width:40px;height:40px;}

div img{width:40px;height:40px;transition:all 0.3s;}

div img:hover{transfrom:scale{2,2};}//从中心放大两部

《/style》

《div》《img src=“图片地址“ alt=““/》《/div》

扩展资料:

注意事项

transfrom是利用线性代数来存放一个控件(或许是图片)的具体信息.(由于可以通过transfrom直接操作控件.所以肯定直接或者间接的存储着点的信息和控件的大小等信息)

1、移动.左移右移或者上移下移:

CGAffineTransformMakeTranslation(X偏移量, Y偏移量);

CGAffineTransformTranslate(在某个transform的基础上-一般为自身, X偏移量, Y偏移量);

2、改变大小(形变):

CGAffineTransformMakeScale(宽缩放的倍数, 高缩放的倍数);

CGAffineTransformScale(在某个transform的基础上-一般为自身, 宽缩放的倍数, 高缩放的倍数);

利用CSS进行图片放大

加一个a:visited与前面的a一样就行了.
前面那个a最好用a:link.
注意顺序,IE顺序错了会没反应,但firefox不会.

用CSS使文章中的图片(无链)鼠标悬停时出现放大效果

img:hover{}设置宽高属性,比默认情况大就行。注意与周围元素的协调,避免放大后布局错乱。
不过这类行为范畴的东西最好交由JS来完成。
还有就是IE6对元素伪类支持不好,hover有bug。测试的时候要注意。

css鼠标放上去图片变大

给图片的容器设定高度宽度,在设置一个鼠标经过效果,div:hover img{},设置这里的图片宽度高度

完全用css控制鼠标移到小图片上在上边显示大图片

你为这个呀,可以到是可以。只不过在ie6及其以前的版本上是不可以的。给你一个代码,你自己看吧。把自己的图片换一下就可以了。《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》
《html xmlns=“ http://www.w3.org/1999/xhtml“》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“ /》
《title》无标题文档《/title》
《style type=“text/css“》
img{height:300px; width:400px;}
img:hover{height:200px; width:200px;}
《/style》
《/head》《body》
《img src=“bg.jpg“/》
《/body》
《/html》

div+css鼠标指上时怎么让内容大小不变背景图片变大

background-size:200px 100px; 宽高自己定
如果让图片成比例放大,可以使用百分比,如 background-size:110%;

css鼠标悬停transform放大后不变

网络延时导致。图片hover之后等比例放大,鼠标移开又等比例恢复原状,同时带有动画过渡效果,放大不变是因为网络延时导致,建议切换网络重新连接即可。

如何用CSS实现鼠标经过 图片放大的效果

源码如下

《!DOCTYPE html》    
《html》    
《head》    
 《meta charset=“UTF-8“》    
 《title》CSS3鼠标滑过图片放大特效DEMO演示《/title》    
 《style》    
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not(::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}    
《/style》    
   《style》    
@import url(“http://fonts.googleapis.com/css?family=Lato“);    
* {    
 margin: 0;    
 padding: 0;    
 box-sizing: border-box;    
}    
body {    
 font: 14px/1 Lato, sans-serif;    
 color: #555;    
 background: #eee;    
}    
.gallery {    
 width: 790px;    
 margin: 30px auto;    
 padding: 5px;    
 background: #333;    
}    
.gallery 》 div {    
 position: relative;    
 float: left;    
 padding: 5px;    
}    
.gallery 》 div 》 img {    
 width: 250px;    
 transition: .1s transform;    
 transform: translateZ(0);    
 /* hack */    
}    
.gallery 》 div:hover {    
 z-index: 1;    
}    
.gallery 》 div:hover 》 img {    
 transform: scale(1.5, 1.5);    
 transition: .3s transform;    
}    
.cf:before, .cf:after {    
 display: table;    
 content: ““;    
 line-height: 0;    
}    
.cf:after {    
 clear: both;    
}    
h1 {    
 margin: 40px 0;    
 font-size: 24px;    
 text-align: center;    
 text-transform: uppercase;    
}    
footer {    
 margin: 80px 0;    
 text-align: center;    
}    
《/style》    
   《script src=“js/prefixfree.min.js“》《/script》    
《/head》    
《body》    
《div class=“gallery cf“》    
 《div》    
   《img src=“landscape-test-1_1x.jpg“ /》    
 《/div》    
 《div》    
   《img src=“iceberg_1x.jpg“ /》    
 《/div》    
 《div》    
   《img src=“igloo-800_1x.jpg“ /》    
 《/div》    
 《div》    
   《img src=“trees_1x.jpg“ /》    
 《/div》    
 《div》    
   《img src=“space_1x.jpg“ /》    
 《/div》    
 《div》    
   《img src=“render1_1x.jpg“ /》    
 《/div》    
《/div》    
《div style=“text-align:center;clear:both;“》    
《script src=“/gg_bd_ad_720x90.js“ type=“text/javascript“》《/script》    
《script src=“/follow.js“ type=“text/javascript“》《/script》    
《/div》    
《/body》    
《/html》

HTML CSS改变图片大小

这个也没啥好解释的呀,就是图片的排版呀,用dl dt dd 排版图片, 三个图片放大也是很简单的,可以在行内例如
《img width=‘300’ height=’300’ src=“http://www.blueidea.com/articleimg/2007/03/4549/1.jpg“ alt=““ title=““ id=“a“ /》  就能改变原来的大小
或者采用css的方法
在你的img{
  wdith:300px;
  height:300px; 
}

用css怎么做DW5的当鼠标经过图片图片放大离开变回原形的效果

1、假设图片外层DIV的class为pic,图片的大小是400*300,html代码可以写成下面这样:

《divclass=“pic“》

《imgsrc=“abc.jpg“width=“400“height=“300“/》

《/div》
2、如果希望鼠标经过时图片的尺寸变成600*450,那么在css里面只要这样定义就行了:picimg:hover{width:600px;height:450px}

3、这个代码在ie6下会不生效,因为ie6不支持除A标签外的其他元素的:hover伪类。如果要在ie6下兼容,只需要把div改成a标签,也就是在图片上加一个超链接,然后给它加上一个class即可。