Skip to content

Instantly share code, notes, and snippets.

@oloman

oloman/dabblet.css

Created May 11, 2012 21:41
Show Gist options
  • Save oloman/2662560 to your computer and use it in GitHub Desktop.
Save oloman/2662560 to your computer and use it in GitHub Desktop.
Download ZIP
Presentando al equipo con CSS
Raw
dabblet.css
/* Presentando al equipo con CSS */
.presentar a, .presentar img, .presentar a span {
border:0;
padding:0;
margin:0;
}
.presentar a {
position: relative;
display: block;
float: left;
}
.presentar a span {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0px;
left: 0px;
}
.presentar a:hover span {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="presentar">
<a href="javascript:void(0);">
<img alt="" src="http://4.bp.blogspot.com/-FJtHAJP5-2c/T62TBC9UBXI/AAAAAAAAC1Q/DAAAtV00wn0/s400/1.jpg" />
<span>
<img alt="" src="http://2.bp.blogspot.com/-YBufvYJfs8w/T66nZY73RgI/AAAAAAAAC4w/hgGFcob7w8U/s1600/1c.jpg" />
</span>
</a>
<a href="javascript:void(0);">
<img alt="" src="http://1.bp.blogspot.com/-cIGmwHgDnp0/T62TB8l6EmI/AAAAAAAAC1o/4lwRIGMFP2Q/s400/2.jpg" />
<span>
<img alt="" src="http://3.bp.blogspot.com/-IAIz140j3LM/T66nZ9PcQCI/AAAAAAAAC40/JG0Qbs5X6p4/s1600/2c.jpg" />
</span>
</a>
<a href="javascript:void(0);">
<img alt="" src="http://3.bp.blogspot.com/-hZb4I0SRdVU/T62TLcpSY6I/AAAAAAAAC2Y/ZKKxkrSoGK0/s400/4.jpg" />
<span>
<img alt="" src="http://1.bp.blogspot.com/-i1-cnVzy0aU/T66nbJ6dkvI/AAAAAAAAC5E/O9vDPmv-rL8/s1600/4c.jpg" />
</span>
</a>
<a href="javascript:void(0);">
<img alt="" src="http://3.bp.blogspot.com/-ZgH-CBg0u8o/T62YKLiTGkI/AAAAAAAAC3w/3wIuJ26e0AM/s400/8.jpg" />
<span>
<img alt="" src="http://4.bp.blogspot.com/-5cGeodgBdJ8/T66neH9LStI/AAAAAAAAC5c/hkwPl2bIG_k/s1600/8c.jpg" />
</span>
</a>
<a href="javascript:void(0);">
<img alt="" src="http://1.bp.blogspot.com/-pd5dt9KM1UM/T62YdC9Zd1I/AAAAAAAAC4I/uwu3TptL7Fg/s400/7.jpg" />
<span>
<img alt="" src="http://2.bp.blogspot.com/-L16pM5jZ10o/T62YdbatiYI/AAAAAAAAC4Y/H-GukiwIMSU/s400/7b.jpg" />
</span>
</a>
<a href="javascript:void(0);">
<img alt="" src="http://2.bp.blogspot.com/-KnVMRdEkJ90/T62XDMLC7gI/AAAAAAAAC3A/a-kvou1p6L4/s400/5.jpg" />
<span>
<img alt="" src="http://4.bp.blogspot.com/-rdEQNt8oPiI/T62XDYNbRxI/AAAAAAAAC3M/aXTk7liwyFQ/s400/5b.jpg" />
</span>
</a>
<a href="javascript:void(0);">
<img alt="" src="http://4.bp.blogspot.com/-8UPYrBSDIP8/T62XDhRi91I/AAAAAAAAC3Y/6j-IDlrxdsk/s400/6.jpg" />
<span>
<img alt="" src="http://1.bp.blogspot.com/-g-9l9UZPoKs/T62XEKbxQSI/AAAAAAAAC3k/lTCxCj4QLY4/s400/6n.jpg" />
</span>
</a>
<a href="javascript:void(0);">
<img alt="" src="http://1.bp.blogspot.com/-ChQX2U5KLMU/T62TCXOUgdI/AAAAAAAAC2A/lnQLHklrwW4/s400/3.jpg" />
<span>
<img alt="" src="http://2.bp.blogspot.com/-0LOh5bBd4G8/T62aS3C354I/AAAAAAAAC4g/ohn25DARelE/s400/3b.jpg" />
</span>
</a>
</div>
<div style="clear: both;"></div>
Raw
settings.json
{"view":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment