Posted By

goo on 08/20/08


Tagged

css image overflow


Versions (?)

CSS Cambiar el tamaño de las Miniaturas usando la propiedad Css Overflow


 / Published in: CSS
 

URL: http://xyberneticos.com/index.php/2008/02/21/cambiar-el-tamano-de-las-miniaturas-usando-la-propiedad-css-overflow/

  1. /* single thumbnail */
  2. p.thumb{
  3. float:left;
  4. margin:.5em 0;
  5. margin-right:10px;
  6. border:1px solid #999;
  7. padding:2px;
  8. }
  9. p.thumb a{
  10. display:block;
  11. float:left;
  12. width:100px;
  13. height:100px;
  14. line-height:100px;
  15. overflow:hidden;
  16. position:relative;
  17. z-index:1;
  18. }
  19. p.thumb a img{
  20. float:left;
  21. position:absolute;
  22. top:-20px;
  23. left:-50px;
  24. }
  25. /* mouse over */
  26. p.thumb a:hover{
  27. overflow:visible;
  28. z-index:1000;
  29. border:none;
  30. }
  31. p.thumb a:hover img{
  32. border:1px solid #999;
  33. background:#fff;
  34. padding:2px;
  35. }
  36. /* // mouse over */
  37. /* // single thumbnail */
  38.  
  39. <p class="thumb"><a href="http://xyberneticos.com/"><img src="image.jpg" /></a></p>

Report this snippet  

You need to login to post a comment.