#1
Galería con buenos efectos. el Dom Jul 10, 2011 1:06 am
Galería con buenos efectos. el Dom Jul 10, 2011 1:06 amEn 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 que va dentro del widget:
Foro de prueba donde pueden ver el ejemplo: Click aqui.
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.







Mensajes
Reputacion
Puntos
Localización
Edad

