Gem@ BLOG

.oe_overlay { /* estilos de la ventana */
    background: none repeat scroll 0 0 #000000;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
ul.oe_menu {  /* ubicación y ancho del menú */
    clear: both;
    float: left;
    list-style: none outside none;
    margin: 30px 0 0 30px;
    position: relative;
    width: 560px;
}
ul.oe_menu > li {  /* cada pestaña */
    float: left;
    height: 101px;
    padding-bottom: 2px;
    position: relative;
    width: 112px;
}
ul.oe_menu > li > a { /* color pestañas visibles */
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 80px;
    margin: 1px;
    opacity: 0.8;
    padding: 10px;
    text-decoration: none;
    text-shadow: 0 0 1px #000000;
    width: 90px;
    background: #138C95;
}
ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a { /* color pestañas seleccionada  */
    background: none repeat scroll 0 0 #0B585E;
    color: #000;
    opacity: 1;
}
.oe_wrapper ul.hovered > li > a { /* color pestaña en hover */
    background: none repeat scroll 0 0 #2ED8E9;
    text-shadow: 0 0 1px #ccc;
    color: #000;
}
ul.oe_menu div { /* bloque oculto */
    background: none repeat scroll 0 0 #2ED8E9;
    display: none;
    height: 180px;
    left: 1px;
    padding: 30px;
    position: absolute;
    top: 103px;
    width: 498px;
}
ul.oe_menu div ul li a {
    color: #000;
    display: block;
    font-size: 12px;
    margin: 2px;
    padding: 2px 2px 2px 4px;
    text-decoration: none;
}
ul.oe_menu div ul.oe_full {
    width: 100%;
}
ul.oe_menu div ul li a:hover {
    background: none repeat scroll 0 0 #000000;
    color: #FFF;
}
ul.oe_menu li ul {
    float: left;
    list-style: none outside none;
    margin-right: 10px;
    text-align: left;
    width: 150px;
}
li.oe_heading {  /* borde del bloque ocultor */
    border-bottom: 1px solid #000;
    color: #000;
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    text-shadow: 0 0 1px #ccc;
}

<div class="oe_wrapper">
   <div id="oe_overlay" class="oe_overlay"></div>
   <ul id="oe_menu" class="oe_menu">
    <li><a href="">Collections</a>
     <div>
      <ul>
       <li class="oe_heading">Summer 2011</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Special Events</a></li>
       <li><a href="#">Runway Show</a></li>
       <li><a href="#">Overview</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Winter 2010</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">Behind the scenes</a></li>
       <li><a href="#">Interview</a></li>
       <li><a href="#">Photos</a></li>
       <li><a href="#">Download</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Categories</li>
       <li><a href="#">Casual</a></li>
       <li><a href="#">Business</a></li>
       <li><a href="#">Underwear</a></li>
       <li><a href="#">Nature Pure</a></li>
       <li><a href="#">Swimwear</a></li>
       <li><a href="#">Evening</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Projects</a>
     <div style="left:-111px;"><!-- -112px -->
      <ul>
       <li class="oe_heading">Fashion Shows</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Events</li>
       <li><a href="#">Fashion Party 2011</a></li>
       <li><a href="#">Evening specials</a></li>
       <li><a href="#">Fashion Day Milano</a></li>
       <li><a href="#">Model Workshops</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Media</li>
       <li><a href="#">Wallpapers</a></li>
       <li><a href="#">Downloads</a></li>
       <li><a href="#">Images</a></li>
       <li><a href="#">Contest 2011</a></li>
       <li><a href="#">Fashion Mania</a></li>
       <li><a href="#">Green Earth Day</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Fragrances</a>
     <div style="left:-223px;">
      <ul class="oe_full">
       <li class="oe_heading">Fashion Fragrances</li>
       <li><a href="#">Deálure</a></li>
       <li><a href="#">Violet Woman</a></li>
       <li><a href="#">Deep Blue for Men</a></li>
       <li><a href="#">New York, New York</a></li>
       <li><a href="#">Illusion</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Events</a>
     <div style="left:-335px;">
      <ul>
       <li class="oe_heading">Shows 2010</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Shows 2011</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Special Events</li>
       <li><a href="#">Fashion Party 2011</a></li>
       <li><a href="#">Fashion Countdown Party 2010</a></li>
       <li><a href="#">Fashion Day Milano</a></li>
       <li><a href="#">Model Workshops</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Stores</a>
     <div style="left:-447px;">
      <ul>
       <li class="oe_heading">Europe</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Asia</li>
       <li><a href="#">Hong Kong</a></li>
       <li><a href="#">Tokio</a></li>
       <li><a href="#">New Delhi</a></li>
       <li><a href="#">Beijing</a></li>
      </ul>
      <ul>
       <li class="oe_heading">United States</li>
       <li><a href="#">New York</a></li>
       <li><a href="#">Los Angeles</a></li>
       <li><a href="#">Seattle</a></li>
       <li><a href="#">Miami</a></li>
      </ul>
     </div>
    </li>
   </ul>
  </div>

Este efecto que veremos a continuación no es nada nuevo, sin embargo es un efecto que me gusta porque resulta vistoso y nada cansino ya que se añade a imágenes muy puntuales como por ejemplo la publicidad tal el ejemplo de Tutorialzine
 

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

 // Lowering the opacity of all slide in divs
 $('.banner div').css('opacity',0.4);

 // Using the hover method
 $('.banner').hover(function(){

  // Executed on mouseenter

  var el = $(this);

  // Find all the divs inside the banner div,
  // and animate them with the new size

  el.find('div').stop().animate({width:200,height:200},'slow',function(){
   // Show the "Visit Company" text:
   el.find('p').fadeIn('fast');
  });

 },function(){

  // Executed on moseleave

  var el = $(this);

  // Hiding the text
  el.find('p').stop(true,true).hide();

  // Animating the divs
  el.find('div').stop().animate({width:60,height:60},'fast');

 }).click(function(){

  // When clicked, open a tab with the address of the hyperlink

  window.open($(this).find('a').attr('href'));

 });
});
//]]>
</script>

.bannerHolder {
   background: none repeat scroll 0 0 #ccc; /* color - fondo - bloque */
   border: 1px solid #EEEEEE; /* color de borde del bloque */
   border-radius: 12px 12px 12px 12px;
   float: left;
   height: 310px; /* altura - bloque */
   margin: 20px ;
   padding: 10px 25px;
   width: 270px; /* anchura - bloque */
}
.bannerHolder li {
   display: inline;
   list-style: none outside none;
}
.banner {
   float: left;
   height: 125px;
   margin: 5px;
   overflow: hidden;
   position: relative;
   width: 125px;
   padding:  5px;
}
.banner img {
   border: medium none;
   display: block;
}
.banner div {
   background-color: #000; /* color - efecto */
   border-radius: 100px 100px 100px 100px;
   cursor: pointer;
   height: 60px;
   position: absolute;
   width: 60px;
   z-index: 100;
}
.banner .cornerTL {
   left: -63px;
   top: -63px;
}
.banner .cornerTR {
   right: -63px;
   top: -63px;
}
.banner .cornerBL {
   bottom: -63px;
   left: -63px;
}
.banner .cornerBR {
   bottom: -63px;
   right: -63px;
}
.banner p {
   color: white; /* color del texto */
   text-shadow: 1px 1px 1px #505050; /* sombra - texto */
   cursor: pointer;
   display: none;
   font-family: Tahoma,Arial,Helvetica,sans-serif; /* fuente - texto */
   font-size: 11px; /* tamaño del texto */
   left: 0;
   position: absolute;
   text-align: center;
   top: 57px;
   width: 100%;
   z-index: 200;
}

<ul class="bannerHolder">
       <li>
  <div class="banner">
  <a href="url-enlace">
 <img src="url-imagen" alt="imagen" width="125" height="125" /></a>

  <p class="companyInfo">Ejemplo-1</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
   </div></li><li>

</ul>

En noviembre llegó la primera y en febrero la segunda.

Son mis princesas, o mejor dicho ¡Mis reinas! son mis nietas.

El nacimiento de la menor es el motivo de ausencia estos días, pido disculpas a todos los que mandaron algún email o dejaron comentarios sin obtener respuesta.
En breve estoy de regreso con muchas ganas y una sorpresa que os va a gustar.

En Dinamic Drive nos muestran una animación de fotogramas con CSS3.

<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>