Imagen con texto

HTML

<div class="container-a4" style="width: 80%; min-height: 700px; margin: 0 auto;">
<ul class="caption-style-4">
<ul class="caption-style-4"><!-----Ajuster la valeur de width (ci-dessous à 60%) pour obtenir 2 ou 3 colonnes-----></ul>
</ul>
<div class="container-a4" style="width: 60%; min-height: 700px; margin: 0 auto;">
<ul class="caption-style-4">
<li><img src="http://gif" alt="" />
<div class="caption">
<div class="blur">&nbsp;</div>
<div class="caption-text">
<h1>Con amor</h1>
<p><a href="http://fondogifflashgloriav.ek.la/joyas-c25888332">Joyas</a></p>
</div>
</div>
</li>
<li><img src="http://gif" alt="" />
<div class="caption">
<div class="blur">&nbsp;</div>
<div class="caption-text">
<h1>Para mujer amada</h1>
<p><a href="http://parametriclab.eklablog.com/contact">Contact</a></p>
</div>
</div>
</li>
<li><img src="http://gif" alt="" />
<div class="caption">
<div class="blur">&nbsp;</div>
<div class="caption-text">
<h1>Parametric Lab</h1>
<p><a href="http://parametriclab.eklablog.com/lab-c25110128">Lab</a></p>
</div>


</div>
</li>
</ul>
</div>
</div>

CSS

<style type="text/css"><!--
h1,h2,h3,h4{
 padding: 0px;
 margin: 0px;
 }

 .caption-style-4{
 list-style-type: none;
 margin: 0px;
 padding: 0px;
 
 
 }
/*----------Image----------*/
 .caption-style-4 img {
 margin: 0px;
 padding: px;
 float: left;
 z-index: 4;
 width: 160px;/*---largeur img-----*/
 height: 180px;/*----hauteur img*/
}

 .caption-style-4 li{
 float: left;
 padding: 0px;
 position: relative;
 overflow: hidden;
 border-radius: 10%; 
 border: 1px dotted #000;
 box-shadow: 3px 3px 10px black;/*--ombre portée---*/
 }

 .caption-style-4 li:hover .caption{
 opacity: 1;
 }

 .caption-style-4 li:hover img{
 opacity: 1;
 transform: scale(1.15,1.15);
 -webkit-transform:scale(1.15,1.15);
 -moz-transform:scale(1.15,1.15);
 -ms-transform:scale(1.15,1.15);
 -o-transform:scale(1.15,1.15);
 }


 .caption-style-4 img{
 margin: 0px;
 padding: 0px;
 float: left;
 z-index: 4;
 }


 .caption-style-4 .caption{
 cursor: pointer;
 position: absolute;
 opacity: 0;
 -webkit-transition:all 0.45s ease-in-out;
 -moz-transition:all 0.45s ease-in-out;
 -o-transition:all 0.45s ease-in-out;
 -ms-transition:all 0.45s ease-in-out;
 transition:all 0.45s ease-in-out;
 }

 .caption-style-4 img{
 -webkit-transition:all 0.25s ease-in-out;
 -moz-transition:all 0.25s ease-in-out;
 -o-transition:all 0.25s ease-in-out;
 -ms-transition:all 0.25s ease-in-out;
 transition:all 0.25s ease-in-out;
 }
 .caption-style-4 .blur{
 background-color: rgba(250,250,250,0.65);
 height: 300px;
 width: 400px;
 z-index: 5;
 position: absolute;
 }

 .caption-style-4 .caption-text h1{
 text-transform: uppercase;
 font-size: 24px;
 }
 .caption-style-4 .caption-text{
 z-index: 10;
 color: #fff;
 position: absolute;
 width: 300px;
 height: 200px;
 text-align: center;
 top:60px;
 }
--></style>

HTML

<div id="containerEx18">
<div class="ex18"><img src="http://igif" alt="img0" width="140" height="160" /> <img src="http://gif" alt="img1" width="140" height="160" /> <img src="http://gif" alt="img1" width="140" height="160" /></div>
</div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
#containerEx18 {width: 800px;
margin: 0 auto;
}
.ex18 img {
height: 160px;
width: 140px;
border-radius: 10px/3px;
border: 2px dotted #fff;
box-shadow: 2px 1px 8px #000000;
margin: 15px 0;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
}
.ex18 img:hover {
 -webkit-transform:scale(1.1); /*Webkit: Escala de aumento de la imagen 1.2x tamaño original*/-moz-transform:scale(1.1);
-o-transform:scale(1.1);
-ms-transform:scale(1.1);
height: 180px;
width: 140px;
margin-left: -10px;
}
--></style>

Swing

HTML

<table border="0"><tbody><tr>

 <td><img class="swing" style="animation-delay: 0.8s; -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s;" src="http://gif" alt="" width="230" height="180" /></td>

 <td><img class="swing" style="animation-delay: 0.8s; -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s;" src="http://.gif" alt="" width="230" height="180" /></td></tr></tbody></table>

CSS

<style><!--
.swing{
 border-radius: 20px;
 border: 2px dashed #ccc;
 box-shadow: 0 3px 9px #777;
margin:10px 10px 10px 10px;
 -webkit-animation:swinging 10s ease-in-out 0s infinite;
 -moz-animation:swinging 10s ease-in-out 0s infinite;
 animation:swinging 10s ease-in-out 0s infinite;
 -webkit-transform-origin:50% 0;
 -moz-transform-origin:50% 0;
 transform-origin:50% 0;
}

@-webkit-keyframes swinging{
 0% { -webkit-transform: rotate(0); }
 5% { -webkit-transform: rotate(-10deg); }
 25% { -webkit-transform: rotate(6deg); }
 30% { -webkit-transform: rotate(15deg); }
 35% { -webkit-transform: rotate(4deg); }
 40% { -webkit-transform: rotate(13deg); }
 45% { -webkit-transform: rotate(2deg); }
 50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes swinging{
 0% { -moz-transform: rotate(0); }
 5% { -moz-transform: rotate(10deg); }
 25% { -moz-transform: rotate(6deg); }
 30% { -moz-transform: rotate(15deg); }
 35% { -moz-transform: rotate(4deg); }
 40% { -moz-transform: rotate(13deg); }
 45% { -moz-transform: rotate(2deg); }
 50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { -moz-transform: rotate(0); }
}

@keyframes swinging{
 0% { transform: rotate(0); }
 5% { transform: rotate(10deg); }
 
 25% { transform: rotate(6deg); }
 30% { transform: rotate(15deg); }
 35% { transform: rotate(4deg); }
 40% { transform: rotate(13deg); }
 45% { transform: rotate(2deg); }
 50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { transform: rotate(0); }
}
--></style>

HTML

<div id="containerEx6">
<div class="ex6"><img src="https://gif" alt="img0" width="140" height="170" /> <img src="https://gif" alt="img1" width="140" height="170" /> <img src="http://gif" alt="img2" width="140" height="170" /></div>
</div>

CSS

<style type="text/css"><!--
#containerEx6 {width: 800px;
margin: 0 auto;
}
.ex6 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;
}
.ex6 img:hover {

 -webkit-transform: translateX(-30px); }
 -webkit-transform: translateX(10px); }
 opacity: 1; -webkit-transform: translateX(0); }
}
-moz-transform: translateX(2000px); }
-moz-transform: translateX(-30px); }
-moz-transform: translateX(10px); }
opacity: 1; -moz-transform: translateX(0); }
}
 -o-transform: translateX(2000px); }
 -o-transform: translateX(-30px); }
-o-transform: translateX(10px); }
 opacity: 1; -o-transform: translateX(0); }
}
opacity: 0; transform: translateX(2000px); }
transform: translateX(-30px); }
transform: translateX(10px); }
 opacity: 1; transform: translateX(0); }
}
}
--></style>

HTML

<div id="containerEx7">
<div class="ex7"><img src="http://gif" alt="" width="190" height="170" /> <img src="http://gif" alt="" width="190" height="170" /></div>
</div>

CSS

<style type="text/css"><!--
#containerEx7 {width: 800px;
margin: 0 auto;
}
.ex7 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;
}
.ex7 img:hover {
-webkit-transform: translateY(-100px); }
-webkit-transform: translateY(30px); }
-webkit-transform: translateY(-10px); }
 -webkit-transform: translateY(0); }
}
 -moz-transform: translateY(-100px); }
-moz-transform: translateY(30px); }
 -moz-transform: translateY(-10px); }
opacity: 1; -moz-transform: translateY(0); }
}
 opacity: 0; -o-transform: translateY(-100px); }
-o-transform: translateY(30px); }
-o-transform: translateY(-10px); }
opacity: 1; -o-transform: translateY(0); }
}
opacity: 0; transform: translateY(-100px); }
transform: translateY(30px); }
transform: translateY(-10px); }
opacity: 1; transform: translateY(0); }
}
--></style>

HTML

<div id="containerEx8">
<div class="ex8"><img src="http://s017.radikal.ru/i415/1302/0c/f9bb31a13f18.jpg" alt="" width="190" height="220" /> <img src="http://phototive.com/uploads/297/19415/c9judcicsiwflklu.gif" alt="" width="190" height="220" /></div>
</div>

CSS

<style type="text/css"><!--
#containerEx8 {width: 800px;
margin: 0 auto;
}
.ex8 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;
}
.ex8 img:hover {
-webkit-transform: perspective(200px) rotateY(90deg); }
 100% { opacity: 1; -webkit-transform: perspective(200px) rotateY(0deg); }
}
opacity: 0; -moz-transform: perspective(200px) rotateY(90deg); }
 100% { opacity: 1; -moz-transform: perspective(200px) rotateY(0deg); }
}
opacity: 0; -o-transform: perspective(200px) rotateY(90deg); }
 100% { opacity: 1; -o-transform: perspective(200px) rotateY(0deg); }
}
 opacity: 0; transform: perspective(200px) rotateY(90deg); }
 100% { opacity: 1; transform: perspective(200px) rotateY(0deg); }
}
--></style>

HTML

<div id="containerEx9">
<div class="ex9"><img src="http://gif" alt="" width="190" height="220" /> <img src="http://.gif" alt="" width="190" height="220" /></div>
</div>

CSS

<style type="text/css"><!--
#containerEx9 {width: 800px;
margin: 0 auto;
}
.ex9 img {
margin: 20px;
border: 1px dotted #fff; 
border-radius: 1em/0.5em;
-webkit-box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.2); 
-moz-box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.2); 
 box-shadow:2px 2px 3px 3px 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;
}
.ex9 img:hover {
 opacity: 0; -webkit-transform: perspective(200px) rotateX(-90deg); }
 100% { opacity: 1; -webkit-transform: perspective(200px) rotateX(0deg); }
}
 0% { opacity: 0; -moz-transform: perspective(200px) rotateX(-90deg); }
 100% { opacity: 1; -moz-transform: perspective(200px) rotateX(0deg); }
}
 0% { opacity: 0; -o-transform: perspective(200px) rotateX(-90deg); }
 100% { opacity: 1; -o-transform: perspective(200px) rotateX(0deg); }
}
 0% { opacity: 0; transform: perspective(200px) rotateX(-90deg); }
 100% { opacity: 1; transform: perspective(200px) rotateX(0deg); }
}
--></style>

HTML

<div id="containerEx10">
<div class="ex10"><img src="http://gif" alt="" width="190" height="170" /> <img src="http://gif" alt="" width="190" height="170" /></div>
</div>

  

CSS

<style type="text/css"><!--
#containerEx10 {width: 800px;
margin: 0 auto;
}
.ex10 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;
}
.ex10 img:hover {
-webkit-transform: scale(.6); }
 100% { opacity: 1; -webkit-transform: scale(1); }
}
opacity: 0; -moz-transform: scale(.6); }
 100% { opacity: 1; -moz-transform: scale(1); }
}
opacity: 0; -o-transform: scale(.6); }
 100% { opacity: 1; -o-transform: scale(1); }
}
 opacity: 0; transform: scale(.6); }
 100% { opacity: 1; transform: scale(1); }
}
--></style>

Zoom in

HTML

<div id="containerEx11">
<div class="ex11"><img src="https://orig" alt="" width="190" height="170" /> <img src="http://gif" alt="" width="190" height="170" /></div>
</div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
#containerEx11 {width: 800px;
margin: 0 auto;
}
.ex11 img {
margin: 20px;
border: 2px dotted #fff; 
border-radius: 1em/2em;
-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;
}
.ex11 img:hover {
opacity: 0; -webkit-transform: scale(1.2); }
 100% { opacity: 1; -webkit-transform: scale(1); }
}
opacity: 0; -moz-transform: scale(1.2); }
 100% { opacity: 1; -moz-transform: scale(1); }
}
opacity: 0; -o-transform: scale(1.2); }
 100% { opacity: 1; -o-transform: scale(1); }
}
 opacity: 0; transform: scale(1.2); }
 100% { opacity: 1; transform: scale(1); }
}
--></style>

Opacidad

HTML

<div id="containerEx12">
<div class="ex12"><img src="http://ekladata.com/1cQym0Os-QOodvm95ppitUfjDhw@120x120.gif" alt="" width="150" height="160" /> <img src="https://lh4.googleusercontent.com/-Z2p_xl5_wwE/U7rMFwRoiwI/AAAAAAAAmp8/plB3GrMRB7s/w600-h445-no/1.gif" alt="" width="150" height="160" /> <img src="http://images5.fanpop.com/image/photos/31600000/Cinderella-classic-disney-31690784-500-291.gif" alt="" width="150" height="160" /></div>
</div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
#containerEx12 {width: 800px;
margin: 0 auto;
}
.ex12 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;
}
.ex12 img:hover {
 
opacity: 0.5; top: 30px; }
 100% { opacity: 1; top: 0; }
}
opacity: 0.5; top: 30px; }
 100% { opacity: 1; top: 0; }
}
 opacity: 0.5; top: 30px; }
 100% { opacity: 1; top: 0; }
}
opacity: 0.5; top: 30px; }
 
}
--></style>

Flip vertical

HTML

<div id="containerEx13">
<div class="ex13"><img src="https://lh5.googleusercontent.com/-gSzVgCspMp4/U1Khbe42d0I/AAAAAAAAQqU/GDjvG86YJJY/w375-h500-no/2.gif" alt="" width="140" height="160" /> <img src="http://img0.liveinternet.ru/images/attach/c/2//67/366/67366509_3620e03de9b4.gif" alt="" width="140" height="160" /> </div>
</div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
#containerEx13 {width: 800px;
margin: 0 auto;
}
.ex13 img {
margin: 20px;
border: 2px dotted #fff; 
border-radius: 11% 3%;
-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;
}
.ex13 img:hover {
opacity: 0; -webkit-transform: perspective(200px) rotateY(80deg); }
 40% { -webkit-transform: perspective(200px) rotateY(-20deg); }
 70% { -webkit-transform: perspective(200px) rotateY(10deg); }
 90% { -webkit-transform: perspective(200px) rotateY(-5deg); }
 100% { opacity: 1; -webkit-transform: perspective(200px) rotateY(0deg); }
opacity: 0; -moz-transform: perspective(200px) rotateY(80deg); }
 40% { -moz-transform: perspective(200px) rotateY(-20deg); }
 70% { -moz-transform: perspective(200px) rotateY(10deg); }
 90% { -moz-transform: perspective(200px) rotateY(-5deg); }
 100% { opacity: 1; -moz-transform: perspective(200px) rotateY(0deg); }
}

opacity: 0; -o-transform: perspective(200px) rotateY(80deg); }
 40% { -o-transform: perspective(200px) rotateY(-20deg); }
 70% { -o-transform: perspective(200px) rotateY(10deg); }
 90% { -o-transform: perspective(200px) rotateY(-5deg); }
 100% { opacity: 1; -o-transform: perspective(200px) rotateY(0deg); }
}
opacity: 0; -webkit-transform: perspective(200px) rotateY(80deg); }
 40% { -webkit-transform: perspective(200px) rotateY(-20deg); }
 70% { -webkit-transform: perspective(200px) rotateY(10deg); }
 90% { -webkit-transform: perspective(200px) rotateY(-5deg); }
 100% { opacity: 1; -webkit-transform: perspective(200px) rotateY(0deg); }
--></style>

Bounce in left

HTML

<div id="containerEx14">
<div class="ex14"><img src="http://bestgif.su/_ph/52/2/405915078.gif?1427279991" alt="" width="140" height="160" /> <img src="http://img1.liveinternet.ru/images/attach/c/2/73/96/73096429_06_11_2009_0405700001257499.gif" alt="" width="140" height="160" /> <img src="http://img1.liveinternet.ru/images/attach/c/2/73/96/73096233_a88977978517.gif" alt="" width="140" height="160" /></div>
</div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
#containerEx14 {width: 500;
margin: 0 auto;
}
.ex14 img {
margin: 10px;
border: 2px dotted #fff; 
border-radius: 1em 0.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;
-ms-transition: all 0.5s ease;
}
.ex14 img:hover {
 opacity: 0.5; -webkit-transform: translateX(-20px); }
 -webkit-transform: translateX(5px); }
 -webkit-transform: translateX(-2px); }
opacity: 1; -webkit-transform: translateX(0); }
}
opacity: 0.5; -moz-transform: translateX(-20px); }
 -moz-transform: translateX(5px); }
 -moz-transform: translateX(-2px); }
 opacity: 1; -moz-transform: translateX(0); }
}
opacity: 0.5;-o-transform: translateX(-20px); }
 -o-transform: translateX(5px); }
 -o-transform: translateX(-2px); }
 opacity: 1; -o-transform: translateX(0); }
}
opacity: 0.5; transform: translateX(-20px); }
transform: translateX(5px); }
transform: translateX(-2px); }
opacity: 1; transform: translateX(0); }
}
--></style>

HTML

<div id="containerEx19">
<div class="ex19"><img src="http://img1.liveinternet.ru/images/attach/b/4/103/221/103221855_1154721.gif" alt="" width="150" height="170" /> <img src="http://img0.liveinternet.ru/images/attach/c/8/100/904/100904650_46.gif" alt="" width="150" height="170" /></div>
</div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
#containerEx19 {width: 800px;
margin: 0 auto;
}
.ex19 img {
margin: 20px;
border: 1px dotted #fff; 
border-radius: 1em/0.5em;
-webkit-box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.2); 
-moz-box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.2); 
 box-shadow:2px 2px 3px 3px 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;
}
.ex19 img:hover {
 opacity:0; transition:.5s 0.2s; 
transition:.4s ease-out; 
-webkit-transition:0.4s ease-out; -webkit-transform:rotateX(90deg) translate(-3px,-3%); transform:rotateX(90deg) translate(-3px,-3%); 
}
z-index:2; transform:scale(1.2);
-webkit-transform:scale(1.2); }
box-shadow:0 0 0 2px #FFF, 0 0 20px 5px #000; transition:.1s; -webkit-transition:0.1s; }
ransform:scale(1.1); -webkit-transform:scale(1.1); }
--></style>

BounceInRight

HTML

<div class="hovergallery1">
<img src="http://egif" width="155" height="180" /><img src="http://gif"width="155" height="180" /> </div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
 .hovergallery1 img{ -webkit-transform:scale(0.8);
 border-radius: 5%/2%;
 border: 2px dotted #fff;
 -moz-transform:scale(0.3);
 -o-transform:scale(0.3);
 -ms-transform:scale(0.3);
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 -ms-transition-duration: 0.5s;opacity: 0.7; /*Nivel de opacidad de las imágenes*/margin: 0 10px 5px 0; /*Margen entre las imágenes*/
 box-shadow:0px 2px 10px #000;
 }.hovergallery1 img:hover{
 box-shadow:0px 2px 10px #000;
opacity: 0.5; -webkit-transform: translateX(50px); }
-webkit-transform: translateX(-2px); }
-webkit-transform: translateX(2px); }
 opacity: 1; -webkit-transform: translateX(0); }
}
opacity: 0.5; -moz-transform: translateX(50px); }
 -moz-transform: translateX(-2px); }
-moz-transform: translateX(2px); }
 opacity: 1; -moz-transform: translateX(0); }
}
opacity: 0.5; -o-transform: translateX(50px); }
-o-transform: translateX(-2px); }
-o-transform: translateX(2px); }
 opacity: 1; -o-transform: translateX(0); }
}
opacity: 0,5; transform: translateX(50px); }
transform: translateX(-5px); }
transform: translateX(5px); }
opacity: 1; transform: translateX(0); }
}
 </style>

HTML

<div class="hovergallery2">
<img src="http://gif"width="155" height="180" /><img src="http://.gif" width="155" height="180" /> </div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
 .hovergallery2 img{ -webkit-transform:scale(0.8);
 border-radius: 25%;
 border: 1px dotted #000;
 -moz-transform:scale(0.8);
 -o-transform:scale(0.8);
 -ms-transform:scale(0.8);
 -webkit-transition-duration: 0.3s;
 -moz-transition-duration: 0.3s;
 -o-transition-duration: 0.3s;
 -ms-transition-duration: 0.3s;opacity: 0.6; /*Nivel de opacidad de las imágenes*/margin: 0 10px 5px 0; /*Margen entre las imágenes*/
 box-shadow:0px 2px 10px #000;
 }.hovergallery2 img:hover{
 box-shadow:3px 3px 10px #000; /*Sombra sobre toda la imagen*
 /-webkit-box-shadow:3px 2px 10px #000;
 -moz-box-shadow:3px 2px 10px #000;
 -ms-box-shadow:3px 2px 10px #000; opacity: 1
 }
 </style>

BounceIn

HTML

<div class="hovergallery3">
<img src="http://gif" width="155" height="180" /><imgre src="http://gif" width="155" height="180" /> </div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
 .hovergallery3 img{ -webkit-transform:scale(0.8);
 border-radius: 5%;
 border: 1px dotted #000;
 -moz-transform:scale(0.8);
 -o-transform:scale(0.8);
 -ms-transform:scale(0.8);
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 -ms-transition-duration: 0.5s;opacity: 0.7; /*Nivel de opacidad de las imágenes*/margin: 0 10px 5px 0; /*Margen entre las imágenes*/
 box-shadow:0px 2px 10px #000;
 }.hovergallery3 img:hover{ 
opacity: 0,7; -webkit-transform: scale(.3); }
 50% { -webkit-transform: scale(1.05); }
 70% { -webkit-transform: scale(.9); }
 100% { opacity: 1; -webkit-transform: scale(1); }
}
 0% { opacity: 0,7; -moz-transform: scale(.3); }
 50% { -moz-transform: scale(1.05); }
 70% { -moz-transform: scale(.9); }
 100% { opacity: 1; -moz-transform: scale(1); }
}
 0% { opacity: 0,7; -o-transform: scale(.3); }
 50% { -o-transform: scale(1.05); }
 70% { -o-transform: scale(.9); }
 100% { opacity: 1; -o-transform: scale(1); }
}
 0% { opacity: 0,7; transform: scale(.3); }
 50% { transform: scale(1.05); }
 70% { transform: scale(.9); }
 100% { opacity: 1; transform: scale(1); }
}
 </style>

HTML

<div class="hovergallery4">
<img src="https://lh4.googleusercontent.com/-1AO_SM493Kk/VQccdh2zI6I/AAAAAAABfzI/fSm_WXbKdMg/w294-h298-no/1-294x298.gif"width="175" height="220" /><img src="http://bestgif.su/_ph/23/2/884911976.gif?1427282923"width="175" height="220" /> </div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
.hovergallery4img{ -webkit-transform:scale(0.8);
 border-radius: 12% /22%;
border: 1px dotted #000;
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;opacity: 0.6; /*Nivel de opacidad de las imágenes*/margin: 2px 3px 3px 2px; /*Margen entre las imágenes*/
box-shadow:1px 1px 7px #000;
}.hovergallery4img:hover{
-webkit-box-shadow:3px 2px 10px #000;
-moz-box-shadow:3px 2px 10px #000;
-ms-box-shadow:3px 2px 10px #000; 
 /* Animation Effect - effectRotateInUpLeft */
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate(10deg);
 transform: rotate(10deg);
 opacity: 0,7;
 }
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate(0);
 transform: rotate(0);
 opacity: 1;
 }
}
 -webkit-transform-origin: left bottom;
 -ms-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 transform: rotate(10deg);
 opacity: 0,7;
 }
 -webkit-transform-origin: left bottom;
 -ms-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate(0);
 -ms-transform: rotate(0);
 transform: rotate(0);
 opacity: 1;
 }
</style>

HTML

<div style="position: absolute; top: 13px; left: 110px;"> <img class="animatebox animation swing" src="http://www.01gif-anime.com/img/religion/ange/anges043.gif" width="80" height="85"alt=""/></div>
<div style="position: absolute; top: 13px; left: 1116px;"><img class="animatebox animation swing" style="animation-delay: 0.8s; -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s;" src="https://lh4.googleusercontent.com/-lSiHuAZm5bc/U5RaaH_cXFI/AAAAAAAAeIg/-0GjVWnQKfw/w99-h150-no/3.gif"width="80" height="85" alt=""/></div>

HTML  para  los  imágenes

<img class="animatebox animation swing" src="https://img-fotki.yandex.ru/get/5005/romanova-atal.1e/0_4dcae_64d59b28_orig" alt="" width="164" height="126" /><img class="animatebox animation swing" src="https://img-fotki.yandex.ru/get/5113/94039626.61/0_652c6_4acd64e3_orig " alt="" width="164" height="126" />

CSS

<style type="text/css"><!--
.animatebox {
 -webkit-animation:swinging 10s ease-in-out 0s infinite;
 -moz-animation:swinging 10s ease-in-out 0s infinite;
 animation:swinging 10s ease-in-out 0s infinite;
 -webkit-transform-origin:50% 0;
 -moz-transform-origin:50% 0;
 transform-origin:50% 0;
}
 
@-webkit-keyframes swinging{
 0% { -webkit-transform: rotate(0); }
 5% { -webkit-transform: rotate(10deg); }
 10% { -webkit-transform: rotate(-9deg); }
 15% { -webkit-transform: rotate(8deg); }
 20% { -webkit-transform: rotate(-7deg); }
 25% { -webkit-transform: rotate(6deg); }
 30% { -webkit-transform: rotate(-5deg); }
 35% { -webkit-transform: rotate(4deg); }
 40% { -webkit-transform: rotate(-3deg); }
 45% { -webkit-transform: rotate(2deg); }
 50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { -webkit-transform: rotate(0); }
}
 
@-moz-keyframes swinging{
 0% { -moz-transform: rotate(0); }
 5% { -moz-transform: rotate(10deg); }
 10% { -moz-transform: rotate(-9deg); }
 15% { -moz-transform: rotate(8deg); }
 20% { -moz-transform: rotate(-7deg); }
 25% { -moz-transform: rotate(6deg); }
 30% { -moz-transform: rotate(-5deg); }
 35% { -moz-transform: rotate(4deg); }
 40% { -moz-transform: rotate(-3deg); }
 45% { -moz-transform: rotate(2deg); }
 50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { -moz-transform: rotate(0); }
}
 
@keyframes swinging{
 0% { transform: rotate(0); }
 5% { transform: rotate(10deg); }
 10% { transform: rotate(-9deg); }
 15% { transform: rotate(8deg); }
 20% { transform: rotate(-7deg); }
 25% { transform: rotate(6deg); }
 30% { transform: rotate(-5deg); }
 35% { transform: rotate(4deg); }
 40% { transform: rotate(-3deg); }
 45% { transform: rotate(2deg); }
 50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { transform: rotate(0); }
}
}
--></style>

HTML

<div class="hovergallery5"><img src="https://eCzA" alt="" width="200" height="220" /><img src="http://wgif" alt="" width="200" height="220" /></div>

CSS

<style type="text/css">
.hovergallery5 img{ -webkit-transform:scale(0.8);
 border-radius: 12pt;
border: 1px dotted #000;
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);
-webkit-transition-duration: 0.9s;
-moz-transition-duration: 0.9s;
-o-transition-duration: 0.9s;
-ms-transition-duration: 0.9s;opacity: 1; /*Nivel de opacidad de las imágenes*/margin: 2px 3px 3px 2px; /*Margen entre las imágenes*/
box-shadow:1px 1px 7px #000;
}.hovergallery5 img:hover{
-webkit-box-shadow:3px 2px 10px #000;
-moz-box-shadow:3px 2px 10px #000;
-ms-box-shadow:3px 2px 10px #000; 
 /* Animation Effect - effectRotateInUpLeft */
 
 -webkit-transform: rotate(160deg); 
-moz-transform: rotate(160deg); 
-o-transform: rotate(160deg); 
transform: rotate(160deg);}
 opacity: 0,7;
 }
 -webkit-transform: rotate(160deg); 
-moz-transform: rotate(160deg); 
-o-transform: rotate(160deg); 
transform: rotate(160deg);}
 opacity: 1;
 }
}
 
 -webkit-transform: rotate(160deg); 
 -moz-transform: rotate(160deg); 
 -o-transform: rotate(160deg); 
 transform: rotate(160deg);}
 opacity: 0,7;
 }
 -webkit-transform: rotate(0);
 -ms-transform: rotate(0);
 transform: rotate(0);
 opacity: 1;
}
</style>

HTML

<div class="hovergallery6"><img src="https://lh6.googleusercontent.com/-dy6eflBlE2o/VOdyIloF99I/AAAAAAABc4o/lG0DJAbHW1U/w191-h300-no/1-191x300.gif" width="140" height="175" alt=""/><img src="https://lh4.googleusercontent.com/-dMYOACJOvmk/VOimF16A3zI/AAAAAAABc8I/CySivfkfK3Y/w233-h300-no/1-233x300.gif" width="140" height="175" alt=""/><img src="https://lh4.googleusercontent.com/-5XX8QIh9fkg/VOiyH_C-5AI/AAAAAAABc9I/f_J5CAalYRc/w192-h300-no/2-192x300.gif" width="140" height="175" alt=""/></div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
 .hovergallery6 img{ -webkit-transform:scale(1.0);
 border-radius: 5%;
box-shadow:1px 1px 10px #000;
 border: 1px dotted #000;
 -moz-transform:scale(1.0);
 -o-transform:scale(1.0);
 -ms-transform:scale(1.0);
 -webkit-transition-duration: 0.9s;
 -moz-transition-duration: 0.9s;
 -o-transition-duration: 0.9s;
 -ms-transition-duration: 0.9s;opacity: 0.9; /*Nivel de opacidad de las imágenes*/margin: 0 10px 5px 0; /*Margen entre las imágenes*/
 
 }.hovergallery6 img:hover{
 margin: 10px 10px 15px 10px; 
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 box-shadow:3px 3px 10px #000; /*Sombra sobre toda la imagen*
 /
 -webkit-box-shadow:2px 2px 10px #000
 -moz-box-shadow:3px 2px 10px #000;
 -ms-box-shadow:2px 2px 10px #000; opacity: 1
 ;
 
 }
--></style>