Efectos Pop-Up CSS en Blogger

La creación de los efectos jQuery sin duda es de los mejores para nuestros temas en bloger tanto que es de los mas usados para los diseños pero también los códigos CSS han funcionado tan bien que nos brindan buenos diseños sin utilizar los scripts tan molestos dentro de nuestras plantillas, esto es lo mas importante claro pero bien, veamos lo importante de utilizar el código para crear un diseño mas llamativo dentro de nuestro blog en las imágenes.
En mi investigación de encontrar nuevas ideas me tope con la siguiente recomendación de mi amiga GemaBlog donde me mostraban lo siguiente, el blog de SOHTANAKA donde ellos nos mostraban su diseño creado con CSS como el siguiente.
Como vimos en este diseño los efectos son impresionantes y para ello les mostrare la forma de insertar los códigos que les proporcionare:

Añadiremos los estilos Css antes de ]]></b:skin>

/* Texto oculto */ul.columns {width: 240px; /* ancho de la columna*/list-style: none;margin: 0 auto;padding: 0;float: left;}ul.columns li {width: 220px;float: left;display: inline;margin: 10px;padding: 0;position: relative;}ul.columns li:hover {z-index: 99;}ul.columns li img {background:#000; /* color de fondo */position: relative;filter: alpha(opacity=30);opacity: 0.5; /* grado de opacidad */-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";}ul.columns li:hover img{z-index: 999;filter: alpha(opacity=100);opacity: 1; /* opacidad al pasar el cursor */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}ul.columns li .info {position: absolute;left: -5px; top: -10px;padding: 210px 10px 20px;width: 220px; /* ancho del texto */display: none;background: #000; /* color de fondo del texto */font-size: 1.2em; /* Tamaño de fuente */-webkit-border-radius: 5px; /* esquinas redondeadas */-moz-border-radius: 5px; /* esquinas redondeadas */border-radius: 5px; /* esquinas redondeadas */color:#fff; /* color del texto */}ul.columns li:hover .info {display: block;}ul.columns li h2 {font-size: 15px; /* Tamaño del título */font-weight:bold;text-transform: uppercase;margin: 0;padding: 10px 0;color:#fff; /* Color del título */}ul.columns li p {padding: 0;margin: 0;font-size: 0.9em;}

Donde mostraremos la imagen colocaremos lo siguiente:

<div style=" margin: 10px auto; height: 200px; width: 200px;"><ul class="columns"><li><a href="url-enlace"><img alt="" src="url-imagen" /></a><div class="info"><h2>Título</h2>Texto del contenido</li></ul></div></div>

Bien ya que tenemos los códigos colocados proseguiremos a realizar lo siguiente:

• En Url-Enlace añadimos nuestra url del sitio que queremos enlazar, si no queremos un enlaze entonces podemos eliminar la line siguiente: <a href="url-enlace">

• En Url-imagen añadimos la url de nuestra imagen nuestro diseño devera medir 220x200.

• En titulo añadiremos titulo, y en texto del contenido, sera nuestro texto.

Posted in: Blogger, CSS