用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即可。