• Mensajes Argumentos
  • Recordar usuario
Entra a el MURO

No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo Mensaje [Página 1 de 1.]

#1 Galería con buenos efectos. el Dom Jul 10, 2011 1:06 am
En esta galería podrán ver un par de efectos muy agradables a la vista, el primero es que al pasar e mouse sobre una imagen, esta muestra debajo la información que tu quieras y la segunda (vendría siendo el primer efecto de la galería), es que la imagen se opaca por default y al pesarla el mouse vuelve a su estado original.

Codigo css:

Código:
ul.columns {
   width: 960px;
   list-style: none;
   margin: 0 auto; padding: 0;
}
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 {
   position: relative;
   filter: alpha(opacity=30);
   opacity: 0.3;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
ul.columns li:hover img{
   z-index: 999;
   filter: alpha(opacity=100);
   opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
 
ul.columns li .info {
   position: absolute;
   left: -10px; top: -10px;
   padding: 210px 10px 20px;
   width: 220px;
   display: none;
   background: #fff;
   font-size: 1.2em;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}
ul.columns li:hover .info {display: block;}
 
ul.columns li h2 {
   font-size: 1.2em;
   font-weight: normal;
   text-transform: uppercase;
   margin: 0; padding: 10px 0;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}


Código que va dentro del widget:

Código:
<ul class="columns">
   <li>
      <a href="http://www.designbombs.com/automotive/virgin-racing/"><img src="http://www.sohtanaka.com/web-design/examples/popoutdetails/virgin.jpg" alt="" /></a>
        <div class="info">
         <h2>Virgin Racing</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. cabeza de totumita</p>
        </div>
   </li>
   <li>
      <a href="http://www.designbombs.com/design-firm/dkng-studios/"><img src="http://www.sohtanaka.com/web-design/examples/popoutdetails/dkng.jpg" alt="" /></a>
        <div class="info">
         <h2>DKNG Studios</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
   </li>
   <li>
      <a href="http://www.designbombs.com/clean-websites/dconstruct-2010/"><img src="http://www.sohtanaka.com/web-design/examples/popoutdetails/dconstruct.jpg" alt="" /></a>
        <div class="info">
         <h2>dConstruct 2010</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
   </li>
   <li>
      <a href="http://www.designbombs.com/illustrations/hugs-for-monsters/"><img src="http://www.sohtanaka.com/web-design/examples/popoutdetails/hugsformonsters.jpg" alt="" /></a>
        <div class="info">
         <h2>Hugs for Monsters</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
   </li>
   <li>
      <a href="http://www.designbombs.com/automotive/virgin-racing/"><img src="http://www.sohtanaka.com/web-design/examples/popoutdetails/virgin.jpg" alt="" /></a>
        <div class="info">
         <h2>Virgin Racing</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
   </li>
   <li>
      <a href="http://www.designbombs.com/design-firm/dkng-studios/"><img src="http://www.sohtanaka.com/web-design/examples/popoutdetails/dkng.jpg" alt="" /></a>
        <div class="info">
         <h2>DKNG Studios</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
   </li>
   <li>
      <a href="http://www.designbombs.com/clean-websites/dconstruct-2010/"><img src="http://www.sohtanaka.com/web-design/examples/popoutdetails/dconstruct.jpg" alt="" /></a>
        <div class="info">
         <h2>dConstruct 2010</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
   </li>
   <li>
      <a href="http://www.designbombs.com/illustrations/hugs-for-monsters/"><img src="http://www.sohtanaka.com/web-design/examples/popoutdetails/hugsformonsters.jpg" alt="" /></a>
        <div class="info">
         <h2>Hugs for Monsters</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
   </li>


   <li>
      <a href="http://www.designbombs.com/automotive/virgin-racing/"><img src="http://www.sohtanaka.com/web-design/examples/popoutdetails/virgin.jpg" alt="" /></a>
        <div class="info">
         <h2>Virgin Racing</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
   </li>
   <li>
      <a href="http://www.designbombs.com/design-firm/dkng-studios/"><img src="http://www.sohtanaka.com/web-design/examples/popoutdetails/dkng.jpg" alt="" /></a>
        <div class="info">
         <h2>DKNG Studios</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
   </li>
   <li>
      <a href="http://www.designbombs.com/clean-websites/dconstruct-2010/"><img src="http://www.sohtanaka.com/web-design/examples/popoutdetails/dconstruct.jpg" alt="" /></a>
        <div class="info">
         <h2>dConstruct 2010</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
   </li>
   <li>
      <a href="http://www.designbombs.com/illustrations/hugs-for-monsters/"><img src="http://www.sohtanaka.com/web-design/examples/popoutdetails/hugsformonsters.jpg" alt="" /></a>
        <div class="info">
         <h2>Hugs for Monsters</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
   </li>
</ul><div style="clear:both;"></div>


Foro de prueba donde pueden ver el ejemplo: Click aqui.

#2 Re: Galería con buenos efectos. el Dom Jul 10, 2011 1:16 am
Buen aporte, se te agradec Listo::



Quieres hablar? hablame por skype -> joseemanuelrojasrivas

Hola Invitado recuerda siempre leer las Reglas del foro para evitar problemas

Nunca olvides leer las nuevas normas del foro 8D

Puedes escbribir a las siguientes direcciones

hackerspan@tfwmail.co.cc

Hackerspan@promocionatupagina.com
#3 Re: Galería con buenos efectos. el Sáb Ago 13, 2011 12:24 pm
Una pregunta, eso no necesariamente puede ir en un widget sierto?, se puede pegar en los templates (Versión PHPBB2) y/o hacer una página HTML o no?

Ver el tema anterior Ver el tema siguiente Volver arriba Mensaje [Página 1 de 1.]

Comparte este tema!

Url directa
BBcode
HTML

Ads

Permiso de este foro: No puedes responder a temas en este foro.

 

Promocionatupagina© Todos los derechos reservados.