oloman

CSS Sliding hover effect

Horizontal menu with sliding effect when you hover it, pure CSS

A Pen by Oloman on CodePen.

License.

oloman

/* HR styles */
hr.zero {}
hr.one {border: 0; border-top: 1px solid #999; border-bottom: 1px solid #333; height:0;}
hr.two {border: 1px dashed grey; height: 0; width: 60%;}
hr.three {border: 1px solid red; height: 2px; width: 70%;}
hr.four {border: 2px solid khaki; height: 2px; background-color: darkkhaki;}
hr.five {border: 0 ; border-top: 4px double blue; width: 90%;}
hr.six {border: 2px inset #eee; height: 1px; width: 80%;}
hr.seven {border: 0; height: 12px; box-shadow: inset 0 12px 12px -12px orange;}
hr.eight {border: 0; height: 0; box-shadow: 0 1px 5px 1px purple;}

oloman

/**
 ** Números CSS
 **/
li {display:inline-block;
}

.cero {
width: 20px;
height: 100px;

oloman

/**
 * Formas CSS
 */
li {display:inline-block;}
.cuadrado {
width: 100px;
height: 100px;
background: #cc0000;
}

oloman

/**
 * Formas CSS
 */
li {display:inline-block;}
.cuadrado {
width: 100px;
height: 100px;
background: #cc0000;
}

oloman

/* Tipografia Scrabble CSS */
/* Más en:
http://tympanus.net/codrops/2012/09/12/creative-web-typography-styles/
*/

.scrabble {
    text-align: center;
    margin: 0 auto;
    width:90%;
}

oloman

/* Efecto álbum fotográfico */

body {
    /*background: #e6e6e6 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAXKklEQVR42myaeWyVVbfG95mgM6W0jKd0ggKWAi12YCiFIkVxwFnR72quGmPUxMQY/yExJsa/TEwwapyioiAIqIgK0oqAVBAQQRBlaGUeW6B0ovT0nHN/z3a/TT9zT/L2nffea61nPWt464vH4+EjR46YwsJC434pbB2xWCztypUrk4YMGdLA+Ri2xmPHjpm8vLzZHO/q4peUlFRbX19fV1VVNSUhIWE/12Pnzp0zI0aMMJcvXzapqamZoVCoheujTp48eebQoUMmMzMzYdKkSbOCweC58+fPHxk+fPh17tcyV/PPP/+8d9asWSPS0tLOnTlzxowaNcr0/23YsMHccsst9ph5B/t8vis33XSTPfezJSOMfUi/a9euSaIshBvBQruampp0+UJPT4+EMI2NjQ2RSMQKcf369brp06fXIMSx9evXx1horoS4dOlSICMjw6CMFp4J8f6Z0aNHm9ra2swJEyZ0I0QdCznAvXTu+Y4fP77p888/33vbbbcZCbF79+5MT4hVq1YZreHo0aNWiN7e3iCXp7e1tV2ZOHGi3h/gCdI5btw4+9APP/zgS0xMTOVac35+/mEEHHL16tUAC2uPRqPzfv31V2m5Bi2bixcv1g0cOHBYcnLyj3v27Lm6YMECM378+OMaFCtG0egI7hssFHEKLWFrYXx7UlBQYHJyci5g2ACLi2IZe53nU4qKipJRlj2fP39+elZWlsGiPp23trbO4fnt99xzj+GdVi71oDDj7+joqBZ0GhoaDGadyPEeST9gwIDgN998U19aWho9fPiwYQH1aNAMGzasTgMOGjSohOsXEFJCmdOnT9uJ2Us5Evgcuyodv/vuu2bz5s2nsKZOpVGDouzzWLZ3zJgxPhRmEGo

oloman

/* Visor CSS con miniaturas */


.contenedorvisor {
  position: relative;
  width: 800px;
  height: 700px;
  margin: 0 auto;
  text-align:center;

oloman

/* Menú de círculos expandible */

ul.circulos { 
position: relative;
width: 100%;
height: 120px;
margin: 20px auto;  
text-align: center;
list-style-type: none;  

oloman

/* Efecto hoja con esquina plegada */

body {
padding: 20px;
background: #cccccc;
}
h1 {
text-align: center;
}
.hoja {