Imagen efectos - (page 2) - Tutorial, CSS, HTML

Par GloriaV le 17 Février 2015 à 18:57

HTML<ul id="galeria">
 <li><img src="https://lh4.googleusercontent.com/-XKMrCBgRcJg/U-C07fYE6OI/AAAAAAAA0bs/u3dL2-3UK-0/w500-h279-no/1.gif" alt="" width="190" height="170" /></li><li><img src="https://lh4.googleusercontent.com/-VJRrKeKG9qc/U-C1SXebPQI/AAAAAAAA0cE/YGbzIb7BqhA/w500-h368-no/1.gif" alt="" width="190" height="170" /></li></ul>

CSS<style type="text/css"><!--
ul#galeria { 
list-style: none; 
} 
ul#galeria li { 
float:left; 
} 
ul#galeria li img { 
border: 1px dotted #ccc; 
border-radius: 1em; 
box-shadow: 3px 2px 6px #000000; 
opacity: 0.5; 
} 
ul#galeria img:hover { opacity: 1;
 z-index:100; 
-moz-transform:scale(1.5); 
/* zoom en navegador Firefox */ 
-webkit-transform:scale(1.5); 
/* zoom en navegador Chrome y Safari */ 
-o-transform:scale(1.5);
 }
 /* zoom en navegador Opera */
 ul#galeria li:nth-child(3n) { float: none; 
}
 /* cambiando el 3 variamos el nº de imágenes por fila */
 /* IE no soporta la propiedad transform de CSS 3 */
  --></style>

votre commentaire

Par GloriaV le 18 Février 2015 à 13:45

Hover 3

Puede ser para texto o para imagen

HTML <div class="stable">
<div class="balloon ease-out"><img style="border: 1px dotted #ccc; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1emx; -webkit-box-shadow: box-shadow: 3px 2px 6px #000000; ; -moz-box-shadow: box-shadow: 3px 2px 6px #000000; box-shadow: 3px 2px 6px #000000;" src="http://file.mobilmusic.ru/1a/30/42/561671.gif" alt="" width="125" height="149" /></div>
<div class="balloon ease-in-out"><img style="border: 1px dotted #ccc; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1emx; -webkit-box-shadow: box-shadow: 3px 2px 6px #000000; ; -moz-box-shadow: box-shadow: 3px 2px 6px #000000; box-shadow: 3px 2px 6px #000000;" src="http://file.mobilmusic.ru/a5/51/39/833030.gif" alt="" width="125" height="149" /></div>
<div class="balloon cubic-bezier">Puede ser para texto o para imagen</div>
</div>
<div class="stable">
<div class="balloon default"><img style="border: 1px dotted #ccc; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1emx; -webkit-box-shadow: box-shadow: 3px 2px 6px #000000; ; -moz-box-shadow: box-shadow: 3px 2px 6px #000000; box-shadow: 3px 2px 6px #000000;" src="http://file.mobilmusic.ru/37/bc/28/866985.gif" alt="" width="125" height="149" /></div>
<div class="balloon linear"><img style="border: 1px dotted #ccc; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1emx; -webkit-box-shadow: box-shadow: 3px 2px 6px #000000; ; -moz-box-shadow: box-shadow: 3px 2px 6px #000000; box-shadow: 3px 2px 6px #000000;" src="http://file.mobilmusic.ru/a0/f6/5a/788695.gif" alt="" width="125" height="149" /></div>
<div class="balloon ease-in"><img style="border: 1px dotted #ccc; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1emx; -webkit-box-shadow: box-shadow: 3px 2px 6px #000000; ; -moz-box-shadow: box-shadow: 3px 2px 6px #000000; box-shadow: 3px 2px 6px #000000;" src="http://file.mobilmusic.ru/70/0c/93/1280599.gif" alt="" width="125" height="149" /></div>
</div>

CSS<style type="text/css"><!--
.stable {
 position: relative;
 height: 320px;
 }
 .stable .balloon {
 position: absolute;
 bottom: 0;
 width: 100px;

 height: 163px;
 background: url(/images/balloon.png) no-repeat;
 }
 
 .stable .balloon.ease-in {
 left: 59px;
 transition-timing-function: ease-in;
 }
 .stable .balloon.ease-out {
 left: 169px;
 transition-timing-function: ease-out;
 }
 .stable .balloon.ease-in-out {
 left: 279px;
 transition-timing-function: ease-in-out;
 }
 .stable .balloon.cubic-bezier {
 left: 389px;
 transition-timing-function: cubic-bezier(0,1,1,0);
 }
--></style>
<style type="text/css"><!--
 .stable {
 position: relative;
 height: 320px;
 }
 .stable .balloon {
 position: absolute;
 bottom: 0;
 width: 100px;
 height: 163px;
 background: url(/images/balloon.png) no-repeat;
 }
 .stable:hover .balloon {
 bottom: 157px;
 transition-duration: 3s;
 } 

 .stable .balloon.default {
 left: 39px;
 background-image: url(/images/balloon-blue.png);
 }
 .stable .balloon.linear {
 left: 149px;
 transition-timing-function: linear;
 } 
 .stable .balloon.ease-in {
 left: 259px;
 transition-timing-function: ease-in;
 }
--></style>

votre commentaire

Par GloriaV le 18 Février 2015 à 13:50

HTML<div class="cardfan"><img src="https://img-fotki.yandex.ru/get/5706/nata-komiati.a9/0_5f72a_68382310_GIFL.gif" alt="" /> <img src="https://lh4.googleusercontent.com/-VfLErbvbRnI/Uv3cThM4GPI/AAAAAAAAAtQ/dYkiW8imO6g/w500-h260-no/2.gif" alt="" /> <img src="http://images01.rememes.com/images/2013/07/279eda80-f078-11e2-9a4a-7054d21a8f10.gif" alt="" /></div>

CSS<style type="text/css"><!-- 
 div.cardfan { 
 height: 356px; 
 width: 700px; 
 margin: 2rem auto 0;
 position: relative; 
 }
 div.cardfan img { 
 position: absolute; 
 left: 140px; 
 width: 220px; 
 height: 200px;

 border: 2px solid #fff; 

 border-radius: 1em;

  box-shadow: 3px 2px 6px #000000;

 transform-origin: center 400px; 
 transition: all .6s linear; 
 }
 div.cardfan img:first-child { transform: rotate(5deg); } div.cardfan img:last-child { 
 transform: rotate(-5deg); 
 }
 div.cardfan:hover img:first-child { 
 transform: rotate(25deg); 
 } 
 div.cardfan:hover img:last-child { 
 transform: rotate(-25deg); 
 }
 body{ background-color: #f4f4f4;
 } 
 --></style>

votre commentaire

Par GloriaV le 18 Février 2015 à 14:26

Efecto "Giro 4" Fuente

HTML<div id="containerEx3"><div class="ex3"> <img alt="img0" src="http: ../imagen0.jpg"width="190" height="170" /> <img alt="img1" src="http: ../imagen1.jpg" width="190" height="170"/> <img alt="img2" src="http: ../imagen2.jpg" width="190" height="170"/> <img alt="img3" src="http: ../imagen3.jpg" width="190" height="170"/> </div></div>

CSS<style type="text/css"><!-- 
#containerEx3 {width: 800px;
margin: 0 auto;
}
.ex3 img {
margin: 20px;
border: 2px dotted #fff; 
border-radius: 1em;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
.ex3 img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
transform: rotate(-7deg);
}
--></style>

votre commentaire

Par GloriaV le 18 Février 2015 à 14:32

Efecto "Rotación" Fuente

HTML<div class="rotarY"><img style="border: 2px dotted #ccc; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="https://lh5.googleusercontent.com/-yP5NBuXKVY4/VJGtQiSf3lI/AAAAAAABQsI/EXjzy2exPp0/w213-h300-no/1-213x300.gif" alt="" width="235" height="299" /></div>

CSS.rotarY{
 transform:rotateY(0deg);
 transition-duration: 2s;
 -webkit-transform:rotateY(0deg);
 -webkit-transition-duration: 2s;
 }
 .rotarY:hover{
 transform:rotateY(180deg);
 transition-duration: 2s;
 -webkit-transform:rotateY(100deg);
 -webkit-transition-duration: 2s;
 }

votre commentaire

Par GloriaV le 18 Février 2015 à 14:42

Efecto "Circulo" Ver efecto

HTML<ul class="ch-grid"><li>
 <div class="ch-item ch-img-1">
 <div class="ch-info-wrap">
 <div class="ch-info">
 <div class="ch-info-front ch-img-1">&nbsp;</div>
 <div class="ch-info-back">
 <h3>Con amor</h3>
 <p>muchu gusto y placer presento<a href="http://tutorialgloriav.eklablog.com/">Gran tutorial</a></p>

CSS.ch-item { 
border-radius: 50% 50% 50% 50%; 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
cursor: default; 
height: 100%; 
position: relative; 
width: 100%; 
} 
.ch-info-wrap { background: transparent url(https://lh4.googleusercontent.com/-vQTWCguVppI/VH35HZyXvHI/AAAAAAABO8I/tP6PehMgG-k/w150-h140-no/1-150x140%2B%281%29.gif) repeat scroll 0 0 ; 
border-radius: 50% 50% 50% 50%; 
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 3px rgba(115, 114, 23, 0.8) inset; 
height: 180px; 
left: 20px; 
perspective: 800px; 
position: absolute; 
top: 20px; 
transition: all 0.4s ease-in-out 0s;
width: 180px; 
} 
.ch-info { 
border-radius: 50% 50% 50% 50%; 
height: 180px; 
position: absolute; 
transform-style: preserve-3d; 
transition: all 0.4s ease-in-out 0s; width: 180px; 
} 
.ch-info > div { backface-visibility: hidden; 
background-position: center center;
border-radius: 50% 50% 50% 50%; 
display: block; 
height: 100%; 
position: absolute; width: 100%; 
} 
.ch-info .ch-info-back { background: none repeat scroll 0 0 #f6e6f3; 
transform: rotate3d(0, 1, 0, 180deg); 
} 
.ch-img-1 { background-image: url("https://lh3.googleusercontent.com/-vuIcl__v6iY/VH9UxgLLo7I/AAAAAAABPAw/G_l347ynhnE/w150-h140-no/2.gif"); 
} 
.ch-info h3 { color: #FFFFFF; font-family: 'Open Sans',Arial,sans-serif;
font-size: 14px; 
height: 50px; 
letter-spacing: 2px; 
margin: 0 15px; 
padding: 40px 0 0; 
text-shadow: 0 0 1px #FFFFFF, 0 1px 2px rgba(0, 0, 0, 0.3); text-transform: uppercase; 
} 
.ch-info p { 
border-top: 1px solid rgba(255, 255, 255, 0.5); 
color: #FFFFFF; 
font-size: 12px; 
font-style: italic; 
margin: 0 30px; 
padding: 10px 5px; 
} 
.ch-info p a { 
color: rgba(255, 255, 255, 0.7); 
display: block; 
font-family: 'Open Sans',Arial,sans-serif; 
font-size: 9px; 
font-style: normal; 
font-weight: 700; 
letter-spacing: 1px; 
padding-top: 4px; 
text-transform: uppercase; 
} 
.ch-info p a:hover { 
color: rgba(255, 242, 34, 0.8); 
} 
.ch-item:hover .ch-info-wrap { 
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 3px rgba(115, 114, 23, 0.8) inset; 
} 
.ch-item:hover .ch-info { transform: rotate3d(0, 1, 0, -180deg); 
} 
.ch-grid { 
display: block; 
list-style: none outside none; margin: 20px 0 0; 
padding: 0; 
text-align: center; 
width: 100%; 
} 
.ch-grid:after, .ch-item:before { 
content: ""; display: table; 
} 
.ch-grid:after { 
clear: both; 
} 
.ch-grid li { 
display: inline-block; 
height: 220px; 
margin: 20px; 
width: 220px; 
}

votre commentaire

Par GloriaV le 18 Février 2015 à 15:57

Efecto "Grown" Fuente

HTML<div class="grow pic"><img src="https://lh6.googleusercontent.com/-bte6ghm6yiA/VBQGkqatOSI/AAAAAAAA_Iw/X3HxCwDzzho/s150-no/1.gif" alt="portrait" /></div>

CSS/*GROW*/
 .grow img {
 height: 150px;
 width: 150px; 
border: 2px dotted #fff; border-radius: 1em;
 -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
 } 
 .grow img:hover {
 width: 200px;
 height:200px;
 }

votre commentaire

Par GloriaV le 18 Février 2015 à 16:09

Efecto "Shrink" Fuente

HTML<div class="shrink pic"><img src="https://lh6.googleusercontent.com/-iaXwGzyIktg/U0Ff-9BHozI/AAAAAAAANhM/3GqGM__mAPc/w800-h498-no/12.gif" alt="city" width="275" height="258" /></div>

CSS/*SHRINK*/.shrink img {
height: 250px;
 width: 250px; 
 border: 1px dotted #ccc; border-radius: 1em/3em;
 box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
 } 
 
 .shrink img:hover {
 width: 200px;
 height: 200px;
 }

votre commentaire

Par GloriaV le 18 Février 2015 à 16:23

Efecto "Vertpan pic"

HTML<div class="vertpan pic"><img src="http://file.mobilmusic.ru/cb/0a/6e/1255761.gif" alt="climb" width="180" height="235" /></div>

CSS/*VERTPAN*/
 .vertpan img {
 margin-top: 0px;
border: 2px dotted #ccc; 
 border-radius: 11%;
 box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -webkit-transition: margin 1s ease;
 -moz-transition: margin 1s ease;
 -o-transition: margin 1s ease;
 -ms-transition: margin 1s ease;
 transition: margin 1s ease;
 }
 .vertpan img:hover {
 margin-top: -50px;
 }

votre commentaire

Par GloriaV le 18 Février 2015 à 16:35

Efecto "Tilt"

HTML<div class="tilt pic"><img style="border: 1px dotted #000; -webkit-border-radius: 22%; -moz-border-radius: 22%; border-radius: 22%; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="http://file.mobilmusic.ru/4d/70/d9/1246733.gif" alt="" width="195" height="230" /></div>

CSS /*TILT*/
 .tilt {
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 transition: all 0.5s ease;
 }
 .tilt:hover {
 -webkit-transform: rotate(-10deg);
 -moz-transform: rotate(-10deg);
 -o-transform: rotate(-10deg);
 -ms-transform: rotate(-10deg);
 transform: rotate(-10deg);
 }

votre commentaire

Par GloriaV le 18 Février 2015 à 16:38

Efecto "Morph"

HTML<div class="morph pic"><img style="border: 1px dotted #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="http://file.mobilmusic.ru/c0/c0/a4/1246481.gif" alt="" width="190" height="230" /></div>

CSS/*MORPH*/
 .morph {
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 transition: all 0.5s ease;
 }
 
 .morph:hover {
 border-radius: 50%;
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 transform: rotate(360deg);
 }

votre commentaire

Par GloriaV le 18 Février 2015 à 16:44

Efecto "Focus pic"

HTML<div class="focus pic"><img style="border: 0px solid #0033c7; -webkit-border-radius: 160%/20%; -moz-border-radius: 160%/20%; border-radius: 160%/20%; ; -webkit-box-shadow: #ccc 3px 3px 9px; -moz-box-shadow: #ccc 3px 3px 9px; box-shadow: #000 3px 3px 9px;" src="http://file.mobilmusic.ru/84/1c/6c/1042850.gif" alt="" width="190" height="250" /></div>

CSS/*FOCUS*/
 .focus {
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
 }
 
 .focus:hover {
 border: 10px solid #fff;
 border-radius: 160%/20%;
 width: 200px;
 height: 240px;
 }

votre commentaire

Par GloriaV le 18 Février 2015 à 16:48

Efecto "Blur pic"

HTML<div class="blur pic"><img src="http://lorempixel.com/300/300/transport/2" alt="plane" width="190" height="230" /></div>

CSS/*BLUR*/
 .blur img {
border: 1px dotted #ccc;
 border-radius: 7.5em;
 box-shadow: 3px 2px 6px #000000;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
 } 

 .blur img:hover {
 -webkit-filter: blur(5px);
 }

votre commentaire

Par GloriaV le 13 Juillet 2015 à 13:46

Efecto "B&W"

HTML<div class="bw pic"><img style="border: 1px dotted #ff0000; -webkit-border-radius: 50px/10px; -moz-border-radius: 50px/10px; border-radius: 50px/10px; -webkit-box-shadow: #6d3112 3px 3px 6px; -moz-box-shadow: #6d3112 3px 3px 6px; box-shadow: #6d3112 3px 3px 11px;" src="https://lh4.googleusercontent.com/-C5t4usj-ojs/U9iwm29QqNI/AAAAAAAAvLs/ma7Xbri_qT8/w240-h320-no/1173124.gif" alt="" width="190" height="230" /></div>

CSS
/*B&W*/
.bw { 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.bw:hover { 
  -webkit-filter: grayscale(100%);
}

votre commentaire

Par GloriaV le 13 Juillet 2015 à 13:46

Zoom Fuente

HTML

<div class="zoom img"><img src="https://lh5.googleusercontent.com/-cmq-wSD2qRM/U9TeA493WsI/AAAAAAAAtA0/ZNhyss-PHaE/w240-h320-no/1.gif" alt="" /></div>

CSS

<style type="text/css"><!--
.zoom img {
 width: 170px;
 height: 170px;
 -webkit-transition: all 2s ease;
 -moz-transition: all 2s ease;
 -ms-transition: all 2s ease;
 -o-transition: all 2s ease;
 transition: all 2s ease;
 border: 1px dotted #ccc;
 border-radius: 1em;
}
 
.zoom img:hover {
 width: 240px;
 height: 240px;
 border: 1px dotted #ccc;
 border-radius: 1em;
 -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
 -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
 box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
}
--></style>

votre commentaire

Par GloriaV le 13 Juillet 2015 à 13:50

Efecto "Hover imagen galeria" Fuente

HTML

<div class="hovergallery"><img src="https://.gif" alt="" width="230" height="250" /> <img src="http://jpeg" alt="" width="239" height="250" /> <img src="http://4d.gif" alt="" width="230" height="250" /></div>

CSS

.hovergallery img{
 border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
 -moz-transform:scale(0.8); /*Mozilla scale version*/
 -o-transform:scale(0.8); /*Opera scale version*/
 -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
 -moz-transition-duration: 0.5s; /*Mozilla duration version*/
 -o-transition-duration: 0.5s; /*Opera duration version*/
 opacity: 0.7; /*initial opacity of images*/
 margin: 0 10px 5px 0; /*margin between images*/
 } 
 .hovergallery img:hover{
 -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
 -moz-transform:scale(1.1); /*Mozilla scale version*/
 -o-transform:scale(1.1); /*Opera scale version*/
 box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
 -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
 -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
 opacity: 1;
 }

votre commentaire

Par GloriaV le 13 Juillet 2015 à 15:34

Fuente

HTML

<img class="bell" src="https://iorig" border="0" alt="" width="168" height="217" />

CSS

<style type="text/css">
 img.bell { opacity: 0.8; 
border: 1px dotted #000;
 border-radius: 0.5em;
 box-shadow: 3px 2px 6px #000000;
 -webkit-animation: ring 8s 1s ease-in-out infinite;
 -webkit-transform-origin: 50% 4px;
 -moz-animation: ring 8s 1s ease-in-out infinite;
 -moz-transform-origin: 50% 4px;
 animation: ring 8s 1s ease-in-out infinite;
 transform-origin: 50% 4px;
 }
 
 @-webkit-keyframes ring {
 0% { -webkit-transform: rotateZ(0); }
 1%, 9% { -webkit-transform: rotateZ(30deg); }
 3% { -webkit-transform: rotateZ(-28deg); }
 5% { -webkit-transform: rotateZ(34deg); }
 7% { -webkit-transform: rotateZ(-32deg); }
 11% { -webkit-transform: rotateZ(-28deg); }
 13% { -webkit-transform: rotateZ(26deg); }
 15% { -webkit-transform: rotateZ(-24deg); } 
 17% { -webkit-transform: rotateZ(22deg); }
 19% { -webkit-transform: rotateZ(-20deg); }
 21% { -webkit-transform: rotateZ(18deg); }
 23% { -webkit-transform: rotateZ(-16deg); }
 25% { -webkit-transform: rotateZ(14deg); }
 27% { -webkit-transform: rotateZ(-12deg); }
 29% { -webkit-transform: rotateZ(10deg); }
 31% { -webkit-transform: rotateZ(-8deg); }
 33% { -webkit-transform: rotateZ(6deg); }
 35% { -webkit-transform: rotateZ(-4deg); }
 37% { -webkit-transform: rotateZ(2deg); }
 39% { -webkit-transform: rotateZ(-1deg); }
 41% { -webkit-transform: rotateZ(1deg); }
 43% { -webkit-transform: rotateZ(0); }
 100% { -webkit-transform: rotateZ(0); }
 } 

 @-moz-keyframes ring {
 0% { -moz-transform: rotate(0); }
 1%, 9% { -moz-transform: rotate(30deg); }
 3% { -moz-transform: rotate(-28deg); }
 5% { -moz-transform: rotate(34deg); }
 7% { -moz-transform: rotate(-32deg); }
 11% { -moz-transform: rotate(-28deg); }
 13% { -moz-transform: rotate(26deg); }
 15% { -moz-transform: rotate(-24deg); }
 17% { -moz-transform: rotate(22deg); }
 19% { -moz-transform: rotate(-20deg); }
 21% { -moz-transform: rotate(18deg); }
 23% { -moz-transform: rotate(-16deg); }
 25% { -moz-transform: rotate(14deg); }
 27% { -moz-transform: rotate(-12deg); }
 29% { -moz-transform: rotate(10deg); }
 31% { -moz-transform: rotate(-8deg); }
 33% { -moz-transform: rotate(6deg); }
 35% { -moz-transform: rotate(-4deg); }
 37% { -moz-transform: rotate(2deg); }
 39% { -moz-transform: rotate(-1deg); }
 41% { -moz-transform: rotate(1deg); }
 43% { -moz-transform: rotate(0); }
 100% { -moz-transform: rotate(0); }
 } 

 @keyframes ring {
 0% { transform: rotate(0); }
 1%, 9% { transform: rotate(30deg); }
 3% { transform: rotate(-28deg); }
 5% { transform: rotate(34deg); }
 7% { transform: rotate(-32deg); }
 9% { transform: rotate(30deg); }
 11% { transform: rotate(-28deg); }
 13% { transform: rotate(26deg); }
 15% { transform: rotate(-24deg); }
 17% { transform: rotate(22deg); }
 19% { transform: rotate(-20deg); }
 21% { transform: rotate(18deg); }
 23% { transform: rotate(-16deg); }
 25% { transform: rotate(14deg); }
 27% { transform: rotate(-12deg); }
 29% { transform: rotate(10deg); }
 31% { transform: rotate(-8deg); }
 33% { transform: rotate(6deg); }
 35% { transform: rotate(-4deg); }
 37% { transform: rotate(2deg); }
 39% { transform: rotate(-1deg); }
 41% { transform: rotate(1deg); }
 43% { transform: rotate(0); }
 100% { transform: rotate(0); }
 } 
</style>

votre commentaire

Par GloriaV le 13 Juillet 2015 à 16:43

Giro 4 Ver efecto

HTML

<div class="rota_imagen"><img src="http://gif" alt="" width="165" height="238" /><img src="http://gif" alt="" width="165" height="238" />    </div>

CSS

div.rota_imagen img { 
 margin: 20px; 
 border: 2px solid #fff;

 border-radius: 3em 2.5em/1em 2.5em;
 -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); 
 -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); 
 box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -webkit-transition: all 0.5s ease-out; 
 -moz-transition: all 0.5s ease; 
 -o-transition: all 0.5s ease; } 
 div.rota_imagen img:hover { 
 -webkit-transform: rotate(-10deg); 
 -moz-transform: rotate(-10deg);
 -o-transform: rotate(-10deg); }

votre commentaire

Par GloriaV le 13 Juillet 2015 à 17:06

Fuente

HTML

<div class="pulloutimage" style="height: 203px; width: 258px;"><img class="original" src="http://virtuellife.v.i.pic.centerblog.net/86ed2c7b.gif"  alt="" width="253" height="203" /> <img class="ondemand" src="http://content.foto.my.mail.ru/community/gif.ru./_groupsphoto/h-1143.jpg?1384617889" alt="" width="253" height="203"  /></div>

CSS

<style>
.pulloutimage{
position: relative;
}

.pulloutimage img{
position: absolute; /* absolute position and stack images inside container */ left: 0;
/* aquí estilos para el borde de la primera imagen */
}

.pulloutimage img.ondemand{ /*CSS for image shown on demand */
opacity: 0; visibility: hidden; /* hide it initially (mainly for legacy browsers) */
}

.pulloutimage img.original{
z-index: 1; /* set base z-index of initially shown image */
}

@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */
0%{ /* Start of animation */
z-index: -1;
opacity: 0;
}
50%{ /* Half way point, move image to right edge of container */
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{ /* 51% point, stack animating image on top of original image */
z-index: 2;
}
100%{ /* Final point, move animating image back so it's on top of original */
left: 0;
box-shadow: 8px 8px 15px gray;
}
}

@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */
-webkit-animation-name:revealfromright; /* specify animation keyframe */
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;
animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;
visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;/* esto es la sombra */
z-index:2;
/* aquí estilos para el borde de la segunda imagen */
} 
.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */
opacity:0.5;
} 
</style>

votre commentaire

Par GloriaV le 13 Juillet 2015 à 17:12

Efecto "Side Pan" Fuente

HTML

<div class="sidepan pic"><img src="http://gif" alt="kick" width="235" height="288" /></div>

CSS

/*Sidepan*/.sidepan img {
 margin-left: 0px;
border-radius: 40px/10px;
 border: 1px dotted #000;
box-shadow: 4px 4px 4px rgba(0,0,0,0.2); 
-webkit-transition: margin 1s ease;
 -moz-transition: margin 1s ease;

 -o-transition: margin 1s ease;
 -ms-transition: margin 1s ease;
 transition: margin 1s ease;
 }
 
 .sidepan img:hover {
 margin-left: -200px;
 }

votre commentaire

1 2 3 4 5 6 7 8