http://codepen.io/MaCeLMp4/pen/HbDFB <html> <style type="text/css"> /*****************************/ /* Copyright by CreativeDive */ /*****************************/ /* if use SSL (https://) >>> set the URL Source to https://fonts.googleapis.com/... to load google web-fonts */ /* SHOWROOM CSS */ * {font-family:'Open Sans', sans-serif, Segoe UI light;font-weight:100} html, body {margin:0px;padding:0px;width:100%;height:100%} body {background:#d9d9d9 url("icons/background.jpg") repeat-y center top} body.light, body.light {background:#d9d9d9 url("icons/background.jpg") repeat-y center top!important} .container {padding:50px;width:990px;margin:0 auto} .logo {text-align:center;width:100%} .logo img {text-align:center;margin:0px auto 20px auto;border:0px} h1, h2, h3 {font-weight:300;width:100%;text-align:center;color:#646464;float:left} h3 {color:#1787d6} .color.blue {font-weight:600;color:#1787d6;background:none!important} .color.grey {font-weight:600;color:#b5b5b5;background:none!important} .color.green {font-weight:600;color:#509b07;background:none!important} .color.orange {font-weight:600;color:#d18117;background:none!important} .color.yellow {font-weight:600;color:#c8a208;background:none!important} .color.red {font-weight:600;color:#d30100;background:none!important} .color.purple {font-weight:600;color:#9a0fb8;background:none!important} .color.pink {font-weight:600;color:#b4039d;background:none!important} .description {font-weight:300;font-size:20px;margin-bottom:30px;width:100%;text-align:center;color:#646464} table, .content {border-collapse:collapse;float:left;clear:both;width:100%;margin-bottom:50px;background:#fff;border:10px solid #eee; box-shadow:0px 1px 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 1px 8px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0px 1px 8px rgba(0, 0, 0, 0.3)} td, th {padding:40px 20px 40px 20px;border:1px dotted #ccc;font-size:14px;text-align:center;color:#aaa} .center {margin:0 auto;width:990px} ul {margin:0px;padding:0px;list-style:none;width:330px;float:left} li {display:inline-block;width:100%;height:200px;padding:40px 0px 40px 0px;position:relative;overflow:hidden;border-left:1px dashed #777777} li.li-title {display:inline-block;width:100%;height:auto;padding:0px 0px 0px 0px;position:relative;overflow:visible;border:0px} li.li-title h2, li.li-title h3 {text-align:left} /* DOCUMENTATION CSS */ .content-in {background:#fff;padding:20px;font-size:13px} .content-in table {border-collapse:collapse;float:left;clear:both;width:100%;margin:0px;background:#fff;border:1px solid #fff; box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none} .content-in td {padding:5px;border:1px dotted #ccc;font-size:13px;text-align:center;color:#000} td.light {background:#d9d9d9 url("icons/background.jpg") repeat-y center top;padding:20px} td.dark {background:#060606 url("icons/background-dark.gif") repeat-y center top;padding:20px} td.transparent {background:#d9d9d9 url("icons/background-transparent.jpg") repeat-y center top fixed;padding:20px} code {font-family:"Courier New", monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco;color:#27BB0A;font-size:12px} pre code { font-family:"Courier New", monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco; display:block; clear:both; background:#000; padding:20px 0px 20px 0px; color:#fff; font-size:12px; overflow:auto; line-height:16px; margin:0px 0px 0px 0px; white-space:pre; width:100% } .comp td {padding:5px} .yes {display:block;background:url("icons/yes.png") no-repeat center center} .no {display:block;background:url("icons/no.png") no-repeat center center} .att {display:block;background:url("icons/att.png") no-repeat center center} .sep {width:100%;text-align:center} .sep .image-hover {margin:20px 20px 20px 0px} /****** image hover ******/ .image-hover * {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} .image-hover {position:relative;width:450px;height:200px;display:inline-block;overflow:hidden;background:#fff;border:10px solid #fff; box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3)} .image-hover a {text-decoration:none} .image-hover img {margin:-100px 0px 0px -100px} /*** effect zoom in ***/ .img-zoom-in img { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } .img-zoom-in:hover img { transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1) } /*** effect zoom out ***/ .img-zoom-out img { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } .img-zoom-out:hover img { transform:scale(0.9); -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -ms-transform:scale(0.9); -o-transform:scale(0.9) } /*** effect rotate right ***/ .img-rotate-right img { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } .img-rotate-right:hover img { transform:rotate(20deg); -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); -ms-transform:rotate(20deg); -o-transform:rotate(20deg) } /*** effect rotate left ***/ .img-rotate-left img { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } .img-rotate-left:hover img { transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); -ms-transform:rotate(-20deg); -o-transform:rotate(-20deg) } /*** effect layer hover - black ***/ .img-layer-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:#000;opacity:0} .img-layer-hover:hover .layer {opacity:0.7} .img-layer-hover .layer { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-hover:hover .layer { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer-image hover - black ***/ .img-layer-image-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;background-image:url("icons/lupe.png");background-repeat:no-repeat;background-position:center center} .img-layer-image-hover:hover .layer {opacity:0.7;background-color:#000;background-image:url("icons/lupe.png");background-repeat:no-repeat;background-position:center center} .img-layer-image-hover .layer { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-image-hover:hover .layer { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer-text hover - black ***/ .img-layer-text-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;color:#fff;font-size:13px} .img-layer-text-hover:hover .layer {opacity:0.7} .img-layer-text-hover .layer-text {padding:20px} .img-layer-text-hover.overflow .layer {overflow:auto} .img-layer-text-hover .layer { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-text-hover:hover .layer { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer hover - white ***/ .img-layer-hover-2 .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:#fff;opacity:0} .img-layer-hover-2:hover .layer {opacity:0.7} .img-layer-hover-2 .layer { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-hover-2:hover .layer { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer-image hover - white ***/ .img-layer-image-hover-2 .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#fff;background-image:url("icons/lupe-2.png");background-repeat:no-repeat;background-position:center center} .img-layer-image-hover-2:hover .layer {opacity:0.7;background-color:#fff;background-image:url("icons/lupe-2.png");background-repeat:no-repeat;background-position:center center} .img-layer-image-hover-2 .layer { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-image-hover-2:hover .layer { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer slide - top to bottom ***/ .img-layer-slide-top-bottom .layer {position:absolute;top:0px;right:0px;bottom:100%;left:0px;background:#000;opacity:0} .img-layer-slide-top-bottom:hover .layer {opacity:0.7;bottom:0%} .img-layer-slide-top-bottom .layer { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-slide-top-bottom:hover .layer { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer slide - bottom to top ***/ .img-layer-slide-bottom-top .layer {position:absolute;top:100%;right:0px;bottom:0px;left:0px;background:#000;opacity:0} .img-layer-slide-bottom-top:hover .layer {opacity:0.7;top:0%} .img-layer-slide-bottom-top .layer { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-slide-bottom-top:hover .layer { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer slide - left to right ***/ .img-layer-slide-left-right .layer {position:absolute;top:0px;right:100%;bottom:0px;left:0px;background:#000;opacity:0} .img-layer-slide-left-right:hover .layer {opacity:0.7;right:0%} .img-layer-slide-left-right .layer { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-slide-left-right:hover .layer { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer slide - right to left ***/ .img-layer-slide-right-left .layer {position:absolute;top:0px;right:0px;bottom:0px;left:100%;background:#000;opacity:0} .img-layer-slide-right-left:hover .layer {opacity:0.7;left:0%} .img-layer-slide-right-left .layer { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-slide-right-left:hover .layer { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect origin ***/ .img-origin { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } .img-origin:hover { transform:skew(10deg); transform-origin:top left; -webkit-transform:skew(10deg); -webkit-transform-origin:left; -moz-transform:skew(10deg); -moz-transform-origin:top left; -ms-transform:skew(10deg); -ms-transform-origin:top left; -o-transform:skew(10deg); -o-transform-origin:top left; } /*** effect square to ellipse ***/ .img-square-ellipse {width:300px;height:200px} .img-square-ellipse:hover {-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;border-radius:50%} .img-square-ellipse { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } .img-square-ellipse:hover { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } /*** effect ellipse to square ***/ .img-ellipse-square {width:300px;height:200px} .img-ellipse-square {-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;border-radius:50%} .img-ellipse-square:hover {-moz-border-radius:0%;-webkit-border-radius:0%;-o-border-radius:0%;border-radius:0%} .img-ellipse-square { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } .img-ellipse-square:hover { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } /*** effect square to round ***/ .img-square-round {width:200px;height:200px} .img-square-round:hover {-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;border-radius:50%} .img-square-round { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } .img-square-round:hover { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } /*** effect round to square ***/ .img-round-square {width:200px;height:200px;-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;border-radius:50%} .img-round-square:hover {-moz-border-radius:0%;-webkit-border-radius:0%;-o-border-radius:0%;border-radius:0%} .img-round-square { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } .img-round-square:hover { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } /*** effect layer-image hover - background change ***/ .img-layer-image-hover-backgroundchange .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0.6;background-color:#000;background-image:url("icons/lupe.png");background-repeat:no-repeat;background-position:center center} .img-layer-image-hover-backgroundchange:hover .layer {opacity:0.5;background-color:#fff;background-image:url("icons/lupe-2.png");background-repeat:no-repeat;background-position:center center} .img-layer-image-hover-backgroundchange .layer { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-image-hover-backgroundchange:hover .layer { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect rotate-scale ***/ .img-rotate-scale { transition:all 1.2s ease-in-out; -webkit-transition:all 1.2s ease-in-out; -moz-transition:all 1.2s ease-in-out; -ms-transition:all 1.2s ease-in-out; -o-transition:all 1.2s ease-in-out; } .img-rotate-scale:hover { transform:rotate(720deg) scale(2,2); -webkit-transform:rotate(720deg) scale(2,2); -moz-transform:rotate(720deg) scale(2,2); -ms-transform:rotate(720deg) scale(2,2); -o-transform:rotate(720deg) scale(2,2); } /*** effect rotate-x ***/ .img-rotate-x { transition:all 1.2s ease-in-out; -webkit-transition:all 1.2s ease-in-out; -moz-transition:all 1.2s ease-in-out; -ms-transition:all 1.2s ease-in-out; -o-transition:all 1.2s ease-in-out; } .img-rotate-x:hover { transform:rotateX(180deg); -webkit-transform:rotateX(180deg); -moz-transform:rotateX(180deg); -ms-transform:rotateX(180deg); -o-transform:rotateX(180deg); } /*** effect rotate-y ***/ .img-rotate-y { transition:all 1.2s ease-in-out; -webkit-transition:all 1.2s ease-in-out; -moz-transition:all 1.2s ease-in-out; -ms-transition:all 1.2s ease-in-out; -o-transition:all 1.2s ease-in-out; } .img-rotate-y:hover { transform:rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); } /*** effect rotate-z ***/ .img-rotate-z { transition:all 1.2s ease-in-out; -webkit-transition:all 1.2s ease-in-out; -moz-transition:all 1.2s ease-in-out; -ms-transition:all 1.2s ease-in-out; -o-transition:all 1.2s ease-in-out; } .img-rotate-z:hover { transform:rotateZ(180deg); -webkit-transform:rotateZ(180deg); -moz-transform:rotateZ(180deg); -ms-transform:rotateZ(180deg); -o-transform:rotateZ(180deg); } /*** effect 3d image change ***/ .imagechange-3d-inner {position:absolute;top:0px;right:0px;bottom:0px;left:0px} .imagechange-3d .imgchange-1 {opacity:1} .imagechange-3d:hover .imgchange-1 {opacity:0} .imagechange-3d .imgchange-2 {opacity:0} .imagechange-3d:hover .imgchange-2 {opacity:1} .imgchange-1 {position:absolute;top:0px;right:0px;bottom:0px;left:0px} .imgchange-2 {position:absolute;top:0px;right:0px;bottom:0px;left:0px;padding:20px;color:#fff;background:#000;font-size:13px} .imagechange-3d div { transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; } .imagechange-3d { perspective:1000px; -webkit-perspective:1000px; -moz-perspective:1000px; -ms-perspective:1000px; -o-perspective:1000px; } .imagechange-3d-inner { transform-style:preserve-3d; transition:all 1.0s linear; -webkit-transform-style:preserve-3d; -webkit-transition:all 1.0s linear; -moz-transform-style:preserve-3d; -moz-transition:all 1.0s linear; -ms-transform-style:preserve-3d; -ms-transition:all 1.0s linear; -o-transform-style:preserve-3d; -o-transition:all 1.0s linear; } .imagechange-3d:hover .imagechange-3d-inner { transform:rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); } .imgchange-2 { transform:rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); } /*** effect sharp to blur ***/ .img-sharp-blur img { transition:all 0.6s ease-in-out; -webkit-transition:all 0.6s ease-in-out; -moz-transition:all 0.6s ease-in-out; -ms-transition:all 0.6s ease-in-out; -o-transition:all 0.6s ease-in-out; } .img-sharp-blur:hover img { -webkit-filter:blur(3px); -moz-filter:blur(3px); -o-filter:blur(3px); -ms-filter:blur(3px); filter:url(blur.svg#blur); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); } /*** effect color to grayscale ***/ .img-color-grayscale img { transition:all 0.6s ease-in-out; -webkit-transition:all 0.6s ease-in-out; -moz-transition:all 0.6s ease-in-out; -ms-transition:all 0.6s ease-in-out; -o-transition:all 0.6s ease-in-out; } .img-color-grayscale:hover img { filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:url(greyscale.svg#greyscale); filter:gray; } /*** effect inner-shadow ***/ .img-inner-shadow .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px} .img-inner-shadow:hover .layer { box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9); -moz-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9); -webkit-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9) } .img-inner-shadow .layer { transition:all 0.6s ease-in-out; -webkit-transition:all 0.6s ease-in-out; -moz-transition:all 0.6s ease-in-out; -ms-transition:all 0.6s ease-in-out; -o-transition:all 0.6s ease-in-out; } .img-inner-shadow:hover .layer { transition:all 0.6s ease-in-out; -webkit-transition:all 0.6s ease-in-out; -moz-transition:all 0.6s ease-in-out; -ms-transition:all 0.6s ease-in-out; -o-transition:all 0.6s ease-in-out; } /*** effect inner-shadow 2 ***/ .img-inner-shadow-2 .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px} .img-inner-shadow-2:hover .layer { box-shadow:inset 0px 0px 120px rgba(255, 255, 255, 0.9); -moz-box-shadow:inset 0px 0px 120px rgba(255, 255, 255, 0.9); -webkit-box-shadow:inset 0px 0px 120px rgba(255, 255, 255, 0.9) } .img-inner-shadow-2 .layer { transition:all 0.6s ease-in-out; -webkit-transition:all 0.6s ease-in-out; -moz-transition:all 0.6s ease-in-out; -ms-transition:all 0.6s ease-in-out; -o-transition:all 0.6s ease-in-out; } .img-inner-shadow-2:hover .layer { transition:all 0.6s ease-in-out; -webkit-transition:all 0.6s ease-in-out; -moz-transition:all 0.6s ease-in-out; -ms-transition:all 0.6s ease-in-out; -o-transition:all 0.6s ease-in-out; } /*** effect layer-title slide-top hover ***/ .img-layer-title-slide-top-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;text-align:center} .img-layer-title-slide-top-hover:hover .layer {opacity:0.7} .img-layer-title-slide-top-hover .layer-text {position:absolute;top:-50px;right:0px;left:0px;padding:8px 15px;background:#fff;color:#000;font-size:16px} .img-layer-title-slide-top-hover:hover .layer-text {position:absolute;top:0px} .img-layer-title-slide-top-hover .layer, .img-layer-title-slide-top-hover .layer-text { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-title-slide-top-hover:hover .layer, .img-layer-title-slide-top-hover:hover .layer-text { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer-title slide-bottom hover ***/ .img-layer-title-slide-bottom-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;text-align:center} .img-layer-title-slide-bottom-hover:hover .layer {opacity:0.7} .img-layer-title-slide-bottom-hover .layer-text {position:absolute;bottom:-50px;right:0px;left:0px;padding:8px 15px;background:#fff;color:#000;font-size:16px} .img-layer-title-slide-bottom-hover:hover .layer-text {position:absolute;bottom:0px} .img-layer-title-slide-bottom-hover .layer, .img-layer-title-slide-bottom-hover .layer-text { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-title-slide-bottom-hover:hover .layer, .img-layer-title-slide-bottom-hover:hover .layer-text { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer-title slide-topbottom hover ***/ .img-layer-title-slide-topbottom-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;text-align:center} .img-layer-title-slide-topbottom-hover:hover .layer {opacity:0.7} .img-layer-title-slide-topbottom-hover .layer-text {position:absolute;bottom:100%;right:0px;left:0px;padding:8px 15px;background:#fff;color:#000;font-size:16px} .img-layer-title-slide-topbottom-hover:hover .layer-text {position:absolute;bottom:0px} .img-layer-title-slide-topbottom-hover .layer, .img-layer-title-slide-topbottom-hover .layer-text { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-title-slide-topbottom-hover:hover .layer, .img-layer-title-slide-topbottom-hover:hover .layer-text { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer-title slide-bottomtop hover ***/ .img-layer-title-slide-bottomtop-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;text-align:center} .img-layer-title-slide-bottomtop-hover:hover .layer {opacity:0.7} .img-layer-title-slide-bottomtop-hover .layer-text {position:absolute;top:100%;right:0px;left:0px;padding:8px 15px;background:#fff;color:#000;font-size:16px} .img-layer-title-slide-bottomtop-hover:hover .layer-text {position:absolute;top:0px} .img-layer-title-slide-bottomtop-hover .layer, .img-layer-title-slide-bottomtop-hover .layer-text { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-title-slide-bottomtop-hover:hover .layer, .img-layer-title-slide-bottomtop-hover:hover .layer-text { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer-title-center hover ***/ .img-layer-title-center-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;background-color:#000;text-align:center} .img-layer-title-center-hover:hover .layer {opacity:0.7} .img-layer-title-center-hover .layer-text {margin-top:30px;padding:8px 15px;background:#fff;color:#000;font-size:16px;display:inline-block; -moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px} .img-layer-title-center-hover .layer { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-layer-title-center-hover:hover .layer { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer-panel hover - bottom to top ***/ .img-panel-bottomtop-hover .layer-text {position:absolute;top:100%;right:0px;left:0px;opacity:0.7;background:#fff;color:#000;font-size:16px} .img-panel-bottomtop-hover:hover .layer-text {position:absolute;top:0px} .img-panel-bottomtop-hover .layer-text a {display:inline-block;width:50%;padding:8px 0px;text-align:center;font-size:13px;color:#4588da} .img-panel-bottomtop-hover .layer-text a:hover {background:#4588da;color:#fff} .img-panel-bottomtop-hover .layer-text { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-panel-bottomtop-hover:hover .layer-text { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect layer-panel hover - top to bottom ***/ .img-panel-topbottom-hover .layer-text {position:absolute;bottom:100%;right:0px;left:0px;opacity:0.7;background:#fff;color:#000;font-size:16px} .img-panel-topbottom-hover:hover .layer-text {position:absolute;bottom:0px} .img-panel-topbottom-hover .layer-text a {display:inline-block;width:50%;padding:8px 0px;text-align:center;font-size:13px;color:#4588da} .img-panel-topbottom-hover .layer-text a:hover {background:#4588da;color:#fff} .img-panel-topbottom-hover .layer-text { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-panel-topbottom-hover:hover .layer-text { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect left content hover - right to left ***/ .img-left-content-rightleft-hover .layer-text {position:absolute;left:100%;top:0px;bottom:0px;width:0%;padding:20px;opacity:0;background:#fff;color:#000;font-size:13px;text-align:left} .img-left-content-rightleft-hover:hover .layer-text {position:absolute;left:0px;width:50%;opacity:0.7} .img-left-content-rightleft-hover .layer-text h2 {font-size:20px;text-align:left;margin:0px;padding-bottom:10px;width:100%} .img-left-content-rightleft-hover .layer-text a {display:inline-block;padding:8px 10px;margin-top:15px;text-align:center;font-size:13px;background:#4588da;color:#fff} .img-left-content-rightleft-hover .layer-text a:hover {background:#8ac748;color:#fff} .img-left-content-rightleft-hover .text-inner {padding:8px 0px} .img-left-content-rightleft-hover .layer-text { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-left-content-rightleft-hover:hover .layer-text { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect left content hover - left to right ***/ .img-left-content-leftright-hover .layer-text {position:absolute;right:120%;top:0px;bottom:0px;width:0%;padding:20px;opacity:0;background:#fff;color:#000;font-size:13px;text-align:left} .img-left-content-leftright-hover:hover .layer-text {position:absolute;right:0px;width:50%;opacity:0.7} .img-left-content-leftright-hover .layer-text h2 {font-size:20px;text-align:left;margin:0px;padding-bottom:10px;width:100%} .img-left-content-leftright-hover .layer-text a {display:inline-block;padding:8px 10px;margin-top:15px;text-align:center;font-size:13px;background:#4588da;color:#fff} .img-left-content-leftright-hover .layer-text a:hover {background:#8ac748;color:#fff} .img-left-content-leftright-hover .text-inner {padding:8px 0px} .img-left-content-leftright-hover .layer-text { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-left-content-leftright-hover:hover .layer-text { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect left content hover - top to bottom ***/ .img-left-content-topbottom-hover .layer-text {position:absolute;bottom:100%;right:0px;left:0px;width:100%;padding:20px;opacity:0;background:#fff;color:#000;font-size:13px;text-align:left} .img-left-content-topbottom-hover:hover .layer-text {position:absolute;bottom:0px;opacity:0.7} .img-left-content-topbottom-hover .layer-text h2 {font-size:20px;text-align:left;margin:0px;padding-bottom:10px;width:100%} .img-left-content-topbottom-hover .layer-text a {display:inline-block;padding:8px 10px;margin-top:15px;text-align:center;font-size:13px;background:#4588da;color:#fff} .img-left-content-topbottom-hover .layer-text a:hover {background:#8ac748;color:#fff} .img-left-content-topbottom-hover .text-inner {padding:8px 0px} .img-left-content-topbottom-hover .layer-text { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-left-content-topbottom-hover:hover .layer-text { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect left content hover - bottom top top ***/ .img-left-content-bottomtop-hover .layer-text {position:absolute;top:100%;right:0px;left:0px;width:100%;padding:20px;opacity:0;background:#fff;color:#000;font-size:13px;text-align:left} .img-left-content-bottomtop-hover:hover .layer-text {position:absolute;top:0px;opacity:0.7} .img-left-content-bottomtop-hover .layer-text h2 {font-size:20px;text-align:left;margin:0px;padding-bottom:10px;width:100%} .img-left-content-bottomtop-hover .layer-text a {display:inline-block;padding:8px 10px;margin-top:15px;text-align:center;font-size:13px;background:#4588da;color:#fff} .img-left-content-bottomtop-hover .layer-text a:hover {background:#8ac748;color:#fff} .img-left-content-bottomtop-hover .text-inner {padding:8px 0px} .img-left-content-bottomtop-hover .layer-text { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-left-content-bottomtop-hover:hover .layer-text { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect - image opacity ***/ .img-opacity img {position:absolute;top:0px;right:0px;bottom:0px;left:0px} .img-opacity .img-1 {opacity:1} .img-opacity .img-2 {opacity:0} .img-opacity:hover .img-1 {opacity:0} .img-opacity:hover .img-2 {opacity:1} .img-opacity img { transition:all .6s ease-in-out; -webkit-transition:all .6s ease-in-out; -moz-transition:all .6s ease-in-out; -ms-transition:all .6s ease-in-out; -o-transition:all .6s ease-in-out; } .img-opacity:hover img { transition:all 1.2s ease-in-out; -webkit-transition:all 1.2s ease-in-out; -moz-transition:all 1.2s ease-in-out; -ms-transition:all 1.2s ease-in-out; -o-transition:all 1.2s ease-in-out; } /*** effect - image roll ***/ .img-roll {background:#000} .img-roll img {position:absolute;top:0px;right:0px;bottom:0px;left:0px} .img-roll .img-1 {left:0px} .img-roll .img-2 {left:123%} .img-roll:hover .img-1 {left:123%} .img-roll:hover .img-2 {left:0px} .img-roll img { transition:all .6s ease-in-out; -webkit-transition:all .6s ease-in-out; -moz-transition:all .6s ease-in-out; -ms-transition:all .6s ease-in-out; -o-transition:all .6s ease-in-out; } .img-roll:hover img { transition:all 1.2s ease-in-out; -webkit-transition:all 1.2s ease-in-out; -moz-transition:all 1.2s ease-in-out; -ms-transition:all 1.2s ease-in-out; -o-transition:all 1.2s ease-in-out; } /*** effect - shadow 1 ***/ .img-shadow-1 { -webkit-box-shadow: 0 28px 16px -26px black; -moz-box-shadow: 0 28px 16px -26px black; box-shadow: 0 28px 16px -26px black; } .img-shadow-1:hover { transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); -webkit-box-shadow: 0 58px 36px -56px black; -moz-box-shadow: 0 58px 36px -56px black; box-shadow: 0 58px 36px -56px black; } .img-shadow-1 { transition:all .6s ease-in-out; -webkit-transition:all .6s ease-in-out; -moz-transition:all .6s ease-in-out; -ms-transition:all .6s ease-in-out; -o-transition:all .6s ease-in-out; } .img-shadow-1:hover { transition:all .6s ease-in-out; -webkit-transition:all .6s ease-in-out; -moz-transition:all .6s ease-in-out; -ms-transition:all .6s ease-in-out; -o-transition:all .6s ease-in-out; } /*** button-hover ***/ .img-button-hover .layer {position:absolute;top:0px;right:0px;bottom:0px;left:0px;text-align:center} .img-button-hover:hover a {opacity:0.7} .img-button-hover a {display:inline-block;width:100px;height:100px;margin-top:12%;margin-left:2px;margin-right:2px;background:#e71a6e;color:#fff;font-weight:bold;opacity:0;padding-top:38px; -moz-border-radius:50px;-webkit-border-radius:50px;-o-border-radius:50px;border-radius:50px; box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3)} .img-button-hover a:hover {background:#f14d90} .img-button-hover a { transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .img-button-hover:hover a { transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; } /*** effect round button 2 ***/ .button-effect-2.img-button-hover a {margin-top:0px} .button-effect-2.img-button-hover:hover a {margin-top:12%} /*** effect round button 3 ***/ .button-effect-3.img-button-hover a {width:100%;height:100%;margin-top:0px} .button-effect-3.img-button-hover:hover a {margin-top:12%;width:100px;height:100px;-moz-border-radius:50px;-webkit-border-radius:50px;-o-border-radius:50px;border-radius:50px} /*** effect round button 4 ***/ .button-effect-4.img-button-hover a {margin-top:0px} .button-effect-4.img-button-hover:hover a {margin-top:12%} .button-effect-4.img-button-hover:hover a:hover {width:100%;margin-left:0px;margin-right:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-o-border-radius:0px;border-radius:0px} </style> <body> <div class="container"> <div class="logo"> <a href="http://studiomp4.hol.es/"><img src="http://www.plici.ro/images/logo-1386110275.png" border="0"></a> </div> <h1>Image Hover Effects</h1> <div class="sep"> <h2>Zoom In & Zoom Out</h2> <div class="image-hover img-zoom-in"> <img src="http://www.plici.ro/images/1-1386110332.jpg"> </div> <div class="image-hover img-zoom-out"> <img src="http://www.plici.ro/images/2-1386110350.jpg"> </div> </div> <div class="sep"> <h2>Rotate Right & Left</h2> <div class="image-hover img-rotate-right"> <img src="http://www.plici.ro/images/3-1386110366.jpg"> </div> <div class="image-hover img-rotate-left"> <img src="http://www.plici.ro/images/4-1386110379.jpg"> </div> </div> <div class="sep"> <h2>Origin</h2> <div class="image-hover img-origin"> <img src="http://www.plici.ro/images/5-1386110395.jpg"> </div> </div> <div class="sep"> <h2>Square & Ellipse</h2> <div class="image-hover img-square-ellipse" style="background:#fff url(http://www.plici.ro/images/6-1386110415.jpg) no-repeat -100px -100px"></div> <div class="image-hover img-ellipse-square" style="background:#fff url(http://www.plici.ro/images/7-1386110428.jpg) no-repeat -100px -100px"></div> </div> <div class="sep"> <h2>Square & Round</h2> <div class="image-hover img-square-round" style="background:#fff url(http://www.plici.ro/images/1-1386110332.jpg) no-repeat -100px -100px"></div> <div class="image-hover img-round-square" style="background:#fff url(http://www.plici.ro/images/2-1386110350.jpg) no-repeat -100px -100px"></div> </div> <div class="sep"> <h2>Layer-Background-Change</h2> <div class="image-hover img-layer-image-hover-backgroundchange"> <img src="http://www.plici.ro/images/3-1386110366.jpg"> <div class="layer"></div> </div> </div> <div class="sep"> <h2>Rotate & Scale</h2> <div class="image-hover img-rotate-scale"> <img src="http://www.plici.ro/images/4-1386110379.jpg"> </div> </div> <div class="sep"> <h2>Rotate-x / -y / -z</h2> <div class="image-hover img-rotate-x"> <img src="http://www.plici.ro/images/5-1386110395.jpg"> </div> <div class="image-hover img-rotate-y"> <img src="http://www.plici.ro/images/6-1386110415.jpg"> </div> <div class="image-hover img-rotate-z"> <img src="http://www.plici.ro/images/7-1386110428.jpg"> </div> </div> <div class="sep"> <h2>3D Image Change</h2> <div class="imagechange-3d image-hover hover"> <div class="imagechange-3d-inner"> <div class="imgchange-1"> <img src="http://www.plici.ro/images/1-1386110332.jpg"> </div> <div class="imgchange-2"> <img src="http://www.plici.ro/images/2-1386110350.jpg"> </div> </div> </div> </div> <div class="sep"> <h2>Sharp to Blur</h2> <div class="image-hover img-sharp-blur"> <img src="http://www.plici.ro/images/3-1386110366.jpg"> </div> </div> <div class="sep"> <h2>Color to Grayscale</h2> <div class="image-hover img-color-grayscale"> <img src="http://www.plici.ro/images/4-1386110379.jpg"> </div> </div> <div class="sep"> <h2>Inner Shadow</h2> <div class="image-hover img-inner-shadow"> <img src="http://www.plici.ro/images/5-1386110395.jpg"> <div class="layer"></div> </div> <div class="image-hover img-inner-shadow-2"> <img src="http://www.plici.ro/images/6-1386110415.jpg"> <div class="layer"></div> </div> </div> <div class="sep"> <h2>Image Opacity</h2> <div class="image-hover img-opacity"> <img src="http://www.plici.ro/images/7-1386110858.jpg" class="img-1"> <img src="http://www.plici.ro/images/1-1386110332.jpg" class="img-2"> </div> </div> <div class="sep"> <h2>Image Roll</h2> <div class="image-hover img-roll"> <img src="http://www.plici.ro/images/2-1386110350.jpg" class="img-1"> <img src="http://www.plici.ro/images/3-1386110366.jpg" class="img-2"> </div> </div> <div class="sep"> <h2>Shadow 1</h2> <div class="image-hover img-shadow-1"> <img src="http://www.plici.ro/images/4-1386110379.jpg"> </div> </div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .img{width:310px;height:100px;margin:20px;float:left} .img1{overflow:hidden} .img1 div{width:620px;float:left;transition:0.5s} .img1 div img{float:left} .img1:hover div{margin-left:-310px} .img2{overflow:hidden} .img2 img{transition:0.5s} .img2:hover img:nth-child(1){margin-top:-100px} .img3{position:relative} .img3 img {position:absolute;left:0;top:0;transition:1s} .img3 img:nth-child(2){opacity:0} .img3:hover img:nth-child(1){opacity:0} .img3:hover img:nth-child(2){opacity:1} .img4{overflow:hidden} .img4 img{transition:0.5s} .img4:hover img:nth-child(1){margin-top:-100px;opacity:0} </style> </head> <body> <!--左右滑动--> <div class="img img1"> <div> <img src="http://sandbox.runjs.cn/uploads/rs/155/azqeh6bj/1.png"> <img src="http://sandbox.runjs.cn/uploads/rs/155/azqeh6bj/2.png"> </div> </div> <!--上下滑动--> <div class="img img2"> <img src="http://sandbox.runjs.cn/uploads/rs/155/azqeh6bj/1.png"> <img src="http://sandbox.runjs.cn/uploads/rs/155/azqeh6bj/2.png"> </div> <!--淡入淡出--> <div class="img img3"> <img src="http://sandbox.runjs.cn/uploads/rs/155/azqeh6bj/1.png"> <img src="http://sandbox.runjs.cn/uploads/rs/155/azqeh6bj/2.png"> </div> <!--上下滑动 + 淡入淡出--> <div class="img img4"> <img src="http://sandbox.runjs.cn/uploads/rs/155/azqeh6bj/1.png"> <img src="http://sandbox.runjs.cn/uploads/rs/155/azqeh6bj/2.png"> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » Image Hover Effects 喜欢 (1)or分享 (0)
