Advanced Search

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

/ Published in: CSS
Save to your folder(s)
A snippet that will centre an image within a container. The image also has a hover and background element 'on' the image.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.