关键词：
在一个DIV标签里面插入了一张图片，附上链接后，我想当鼠标悬停在图片上面的时候，这个图片会突出或者放大！求代码！
http://www.internetke.com/jsEffects/2015012104/
类似这类效果！
/*科e互联特效基本框架CSS*/
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input margin:0;padding:0;-webkit-text-size-adjust: none
h1, h2, h3, h4, h5, h6font-size:12px;font-weight:normal
body>divmargin:0 auto
div text-align:left
a img border:0
body color: #333; text-align: center; font: 12px "微软雅黑";
ul, ol, li list-style-type:none;vertical-align:0
a outline-style:none;color:#535353;text-decoration:none
a:hover color: #D40000; text-decoration: none
.clearheight:0; overflow:hidden; clear:both
.button display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
.red color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top, #ed1c24, #A51715);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
.red:hover background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;
.red:active color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
.cor_bs,.cor_bs:hovercolor:#ffffff;
.keBodybackground:url(../images/bodyBg.jpg) repeat #333;
.keTitleheight:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal
.kePublicbackground:#dfdfdf; padding:50px;
.keBottomcolor:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px
.keTxtPfont-size:16px; color:#ffffff;
.keUrlcolor:#FFF; font-size:30px;
.keUrl:hover text-decoration: underline; color: #FFF;
.mKeBanner,.mKeBanner divtext-align:center;
/*科e互联特效基本框架CSS结束，应用特效时，以上样式可删除*/
/* 效果CSS开始 */
body
-webkit-backface-visibility: hidden;
.demo
margin: 0px auto;
text-align:center;
.nav li
position: relative;
display: inline-block;
margin-left: -50px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
.nav li a
display: inline-block;
width: 120px;
height: 120px;
padding: 30px;
border-radius: 50%;
border-width: 8px;
border-style: solid;
.nav li:hover
z-index: 11;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
.nav li:hover a
text-decoration: none;
.nav li:hover span
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-animation: moveFromBottom 0.3s ease;
-moz-animation: moveFromBottom 0.3s ease;
-o-animation: moveFromBottom 0.3s ease;
-ms-animation: moveFromBottom 0.3s ease;
animation: moveFromBottom 0.3s ease;
.nav li:nth-child(1) a
color: #4d9683;
text-shadow: 0 1px 0 #9de3cf;
border-color: #549e89;
background-color: #51c9a7;
.nav li:nth-child(2) a
color: #be607e;
text-shadow: 0 1px 0 #de8ba5;
border-color: #e499b0;
background-color: #e67b9c;
.nav li:nth-child(3) a
color: #5e9eb4;
text-shadow: 0 1px 0 #adddec;
border-color: #a2cfde;
background-color: #7ec9e3;
.nav li:nth-child(4) a
color: #ba9d5e;
text-shadow: 0 1px 0 #f5e0ad;
border-color: #dcc999;
background-color: #f0cd78;
.nav li:nth-child(5) a
color: #b468a2;
text-shadow: 0 1px 0 #e8acd8;
border-color: #d8abcd;
background-color: #dd91cb;
.nav li:nth-child(1):hover a
color: #0f775c;
text-shadow: 0 1px 0 #81e6c9;
border-color: #0a8462;
background-color: #00c18c;
.nav li:nth-child(2):hover a
color: #b12a55;
text-shadow: 0 1px 0 #ff95b7;
border-color: #ba335c;
background-color: #ea5180;
.nav li:nth-child(3):hover a
color: #2883a2;
text-shadow: 0 1px 0 #9cdef2;
border-color: #4397b3;
background-color: #55c1e5;
.nav li:nth-child(4):hover a
color: #ab8228;
text-shadow: 0 1px 0 #ffe199;
border-color: #b08f3e;
background-color: #f8c64d;
.nav li:nth-child(5):hover a
color: #a33689;
text-shadow: 0 1px 0 #ec97d6;
border-color: #b7569f;
background-color: #dd70c3;
.nav span
display: block;
line-height:70px;
font-size: 30px;
font-style: normal;
.nav span:before
display: block;
.nav li:nth-child(1) span:before
content: "home";
.nav li:nth-child(2) span:before
content: "phone";
.nav li:nth-child(3) span:before
content: "wifi";
.nav li:nth-child(4) span:before
content: "setting";
.nav li:nth-child(5) span:before
content: "twitter";
@-webkit-keyframes moveFromBottom
from
-webkit-transform: translateY(120%) scale(0.5) ;
opacity: 0;
to
-webkit-transform: translateY(0%) scale(1);
opacity: 1;
@-moz-keyframes moveFromBottom
from
-moz-transform: translateY(120%) scale(0.5) ;
opacity: 0;
to
-moz-transform: translateY(0%) scale(1);
opacity: 1;
@-ms-keyframes moveFromBottom
from
-ms-transform: translateY(120%) scale(0.5) ;
opacity: 0;
to
-ms-transform: translateY(0%) scale(1);
opacity: 1;
@-o-keyframes moveFromBottom
from
-o-transform: translateY(120%) scale(0.5) ;
opacity: 0;
to
-o-transform: translateY(0%) scale(1);
opacity: 1;
@keyframes moveFromBottom
from
transform: translateY(120%) scale(0.5) ;
opacity: 0;
to
transform: translateY(0%) scale(1);
opacity: 1;
.nav span:before
font-family: 'LigatureSymbols';
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-font-feature-settings: "liga" 1, "dlig" 1;
-moz-font-feature-settings: "liga=1, dlig=1";
-ms-font-feature-settings: "liga" 1, "dlig" 1;
font-feature-settings: "liga" 1, "dlig" 1;
font-size: 80px;
@font-face
font-family: 'LigatureSymbols';
src: url('../font/LigatureSymbols-2.05.eot');
src: url('../font/LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
url('../font/LigatureSymbols-2.05.woff') format('woff'),
url('../font/LigatureSymbols-2.05.ttf') format('truetype'),
url('../font/LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
font-weight: normal;
font-style: normal;
/* 效果CSS结束 */ 参考技术A 就是标签hover的写法，你可看下页面的代码和CSS里的定义。本回答被提问者采纳
html鼠标悬停图片边框出现
参考技术Ahtml鼠标悬停图片边框出现是查看图片的设置是自动默认的。需要修改html鼠标悬停图片边框出现的设置可通过软件设置以更改。 查看详情
翻转效果：用鼠标悬停改变图片
】翻转效果：用鼠标悬停改变图片【英文标题】：RolloverEffect:ChangePicturewithMousehover【发布时间】：2018-02-1811:17:48【问题描述】：我正在尝试创建一个可以改变图片的悬停。很多教程告诉我尝试onmouseover和onmouseout。但是Brackets（我... 查看详情
在网页制作中，怎么把图片应用为动态html效果？当鼠标悬停时图片1换成图片2，要怎么设置？
具体操作Dreamweaver中可以自动设置的工具栏中“插入”-“图片对象”-“鼠标经过图片”如果是用CSS实现的话，可以在需要设置动态效果的标签中使用伪类:hover具体怎么用，就看你对CSS的掌握程度了。PS：该方法不适用于IE6，其他... 查看详情
鼠标悬停图片移动的效果
当前很多购物网站，像京东，蘑菇街这些都有对展示的图片做这种鼠标悬停图片上移，下移，左移或者右移效果，实现代码很简单，就用css3的transform便可实现。下列代码实现的是鼠标悬停，div向上移动30px，鼠标拿开div恢复原始... 查看详情
html+css鼠标悬停效果
HTML+CSS实现鼠标悬停效果HTML：<linkhref="style.css"rel="stylesheet"><aclass="social"href="https://webbb.be"target="_blank"><divclass="front"><iclass="fafa-facebook"></i></div&g 查看详情
css实现鼠标悬停在图片上图片缓慢缩放效果
方法一：.container{ background-size:100%100%; transition:all2s;}.container:hover{ background-size:120%120%;} 方法二：img{ transition:all2s;}img:hover{ transform:scale(1.2); //图片放大的倍 查看详情
css鼠标悬停图片加边框效果，页面布局发生错位的解决办法
CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法.recomend-list{width:1200px;a{@extend%fl;margin-right:30px;width:260px;height:440px;border:2pxsolidtransparent;@extend%borderbox;&:hover{border-color:#109ef3;}}img{widt 查看详情
css鼠标悬停图片加边框效果,不位移的方法
<!DOCTYPEHTML><htmllang="en-US"><head><title>css实现鼠标悬停时图片加边框效果</title><styletype="text/css">body{background:#222;color:#06c;}em{font-style:inherit;}img{background:w 查看详情
html鼠标悬停显示图片
参考技术A<divclass="byl">鼠标悬浮<imgsrc="../"></div>.bylimgdisplay:none;.byl:hoverimgdisplay:block; 查看详情
如何使用css在鼠标悬停时缩放图像？
图像缩放效果，是当鼠标悬停或单击时对图像进行缩放的一种应用效果。这种影响主要用于网站上。在我们要在图像上显示用户详细信息的情况下，这个效果很有用。有两种方法可以创建鼠标悬停效果。使用JavaScript使用CSS在本... 查看详情
html鼠标悬停左侧缩小图片放大到右边
html鼠标悬停左侧缩小图片放大到右边首先这是一张图片在悬停时放大也就是改变大小(宽，高)实现的。2，一张图片在放大的时候会根据其定位(如在div里面的图片会以div的左上角为基准扩大宽和高)来放大的，因此如果我们不去为... 查看详情
html如何实现鼠标悬停显示文字，鼠标移走文字消失。
...属性就可以了，浏览器会默认有这个样式的，最终显示的图片是css里面，可以把文字显示属性设置为block，然后在鼠标hover时把visiability属性设置为可见，鼠标out时设置visiability设置为不可见就可以了。 查看详情
放大鼠标悬停效果
】放大鼠标悬停效果【英文标题】：magnifyeffectonmousehover【发布时间】：2013-05-0611:48:48【问题描述】：我有一个包含几个链接的导航栏。我希望在鼠标悬停时放大（增加大小）的链接。我希望其他链接处于各自的位置。我为此编... 查看详情
悬停在文本上时，悬停效果消失
...】：话题在说——我的问题如下：当我将鼠标悬停在我的图片上时，我希望有一个颜色叠加层图片上的文字应该在悬停前后都可见，没有任何变化问题：当我将鼠标悬停在文本上时，颜色悬停覆盖消失（当我在Div中四处移动而不... 查看详情
html+css制作鼠标悬停效果
...; <metacharset="UTF-8"> <title>鼠标悬停效果</title> <styletype="text/css"> * margin:0; padding:0; ... 查看详情
wordpress里用啥插件或代码能实现鼠标悬停图片上出现文字说明的效果？
wordpress里用什么插件或代码能实现鼠标悬停图片上出现文字说明的效果？这不需要任何插件，只需要修改页面代码，在img标签或a标签中加入title=“你要显示的文字”；即可。例如在a标签中，当鼠标移动到“相关介绍”上，弹出... 查看详情
尝试使用 html 和 css 获得鼠标悬停缩放过渡效果，但图像溢出，图像的位置正在改变
】尝试使用html和css获得鼠标悬停缩放过渡效果，但图像溢出，图像的位置正在改变【英文标题】：Tryingtogetamousehoverzoomtransistioneffectusinghtmlandcssbutimageisgettingoverflowed,theimagespositionaregettingaltered【发布时间】：2020-05-1414:38:14【问题... 查看详情
将鼠标悬停在一张图片上时，更改另外 2 张图片
】将鼠标悬停在一张图片上时，更改另外2张图片【英文标题】：Whenhoveringoveroneimage,changeanother2images【发布时间】：2013-06-2705:32:34【问题描述】：我有一个形状笨拙的导航栏，事实证明它很难使用鼠标悬停效果。基本上，当我将... 查看详情