Posted By

brontus on 08/14/14


Tagged

image centering


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Bruno21


Center A Resizeable Image Vertically And Horizontally In A Container With Hover And Background


 / Published in: CSS
 

URL: http://jsfiddle.net/brontus/jpn1dy2f/3/

A snippet that will centre an image within a container. The image also has a hover and background element 'on' the image.

  1. Markup:
  2.  
  3. <div class="cell-wrapper">
  4. <div class="thumb-wrapper">
  5. <div class="thumb selectable multi">
  6. <img src="http://lorempixel.com/60/143"></img>
  7. </div>
  8. </div>
  9. </div>
  10.  
  11. CSS:
  12.  
  13. body {
  14. background: #FAFAFA;
  15. }
  16.  
  17. .cell-wrapper {
  18. display: table;
  19. }
  20.  
  21. /* Cell */
  22. .thumb-wrapper {
  23. display: table-cell;
  24. text-align: center;
  25. vertical-align: middle;
  26.  
  27. background: #EEEEEE;
  28. width: 139px;
  29. height: 182px;
  30. }
  31.  
  32. .thumb {
  33. display: inline-block;
  34. position: relative;
  35. }
  36.  
  37. img {
  38. position: relative;
  39. z-index: 1;
  40. border: 1px solid;
  41. display: block;
  42. }
  43.  
  44. /*Background*/
  45. .thumb:after {
  46. content: '';
  47. width: 100%;
  48. height: 100%;
  49. background: #FFF;
  50. display:block;
  51. position: absolute;
  52. top: 0;
  53. left: 0;
  54. -webkit-box-shadow:2px 2px 2px 0px #898989;
  55. -moz-box-shadow:2px 2px 2px 0px #898989;
  56. box-shadow:2px 2px 2px 0px #898989;
  57. }
  58.  
  59. /* Offset background for paging effect */
  60. .thumb.multi:after {
  61. content: '';
  62. margin-left: 2px;
  63. margin-top: 2px;
  64. }
  65.  
  66. /* Hover */
  67. .thumb.selectable:before {
  68. content: "";
  69. opacity: 0;
  70. width: 100%;
  71. height: 100%;
  72. background: black;
  73. display:block;
  74. position: absolute;
  75. cursor: pointer;
  76. z-index: 2;
  77. }
  78.  
  79. .thumb.selectable:hover:before {
  80. opacity: 0.2;
  81. }

Report this snippet  

You need to login to post a comment.