Advanced Search

CSS - Page Component - Gallery

/ Published in: CSS
Save to your folder(s)
CSS - Page Component - Gallery

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .gallery { 
  2. 	}
  3. .gallery p.heading {
  4. 	}
  5. .gallery .item { 
  6. 	float:left;
  7. 	display:inline;
  8. 	margin:0 1% 15px 1%;
  9. 	}
  10. .gallery .item a {
  11. 	position:relative;
  12. 	display:block;
  13. 	}
  14. .gallery .item img {
  15. 	display:block;
  16. 	overflow:hidden;
  17. 	width:100%;
  18. 	}
  19. .gallery .item a .overlayicon {
  20. 	display:block;
  21. 	position:absolute;
  22. 	top:0; right:0; bottom:0; left:0;	
  23. 	text-align:center;
  24. 	}
  25. .gallery .item a .overlayicon i {
  26. 	margin-top:22.5%;
  27. 	}
  28.  
  29. @media (min-width:768px) {
  30.  
  31. .gallery .item {
  32. 	width:32%;
  33. 	}
  34. #mid_col .gallery .item {
  35. 	width:49%;
  36. 	}
  37. #left_col .gallery .item, 
  38. #right_col .gallery .item {
  39. 	width:32%;
  40. 	}
  41. #wide_col .gallery .item {
  42. 	width:23.5%;
  43. 	}
  44. .gallery .item.bookend-left { 
  45. 	margin-left:0;
  46. 	clear:both;
  47. 	}
  48. .gallery .item.bookend-right {
  49. 	margin-right:0;
  50. 	float:right;
  51. 	}
  52. .gallery .item a img {
  53. 	}
  54.  
  55. }
  56.  
  57. @media (max-width:767px) {
  58.  
  59. .gallery .item {
  60. 	width:49%!important;
  61. 	}
  62. .gallery .item.odd {
  63. 	margin-left:0;
  64. 	clear:both;
  65. 	}
  66. .gallery .item.even {
  67. 	float:right;
  68. 	margin-right:0;
  69. 	}
  70. .gallery .item.even a {
  71. 	}
  72. .gallery .item a img {
  73. 	width:100%;	
  74. 	}
  75.  
  76. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.