.image { position: relative; display: inline-block; vertical-align: middle; text-align: center; width: 100%; } img.image { display: block; background: none; } .image img { display: inline-block; max-width: 100%; height: auto; } .image.fluid { width: auto; } .image > .delete { right: 0; background-color: rgba(0, 0, 0, 0.3); color: #fff; position: absolute; padding: 4px 6px; .border-radius(5px); opacity: 0.2; cursor: pointer; .transition(all 0.35s ease); } .image { &:hover { & > .delete { opacity: 1; background-color: rgba(0, 0, 0, 0.8); } } } .image.small { width: 40px; } .image.thumb { height: 65px; width: 65px; margin: 0 0 15px 15px; text-align: center; img { width: auto; max-width: auto !important; height: 100%; display: inline-block; } overflow: hidden; &.holder { overflow: auto; height: 61px; width: 61px; border: 2px dashed #999; } &.big { height: 172px; width: 172px; } &.full-modal { height: 157px; width: 157px; } &.big.holder { height: 168px; width: 168px; } &.stacked { margin: 0; } &.small { height: 35px; width: 35px; margin: 0; } &.hovered { border: 5px solid transparent; &:hover { border: 5px solid #009cff; cursor: pointer; } } } .image.thumb.product { .image.thumb.stacked; width: 74px; height: 74px; } /*-------------- Rounded ---------------*/ .rounded.images .image, .rounded.images img, .rounded.image img, .rounded.image { border-radius: 0.3125em; } /*-------------- Circular ---------------*/ .circular.images .image, .circular.images img, .circular.image img, .circular.image { border-radius: 500rem; background-color: #efefef; } /*-------------- Circular ---------------*/ .shadow.images .image, .shadow.images img, .shadow.image img, .shadow.image { .box-shadow(0 0 10px #ccc); } /*-------------- Fluid ---------------*/ .fluid.images, .fluid.image, .fluid.images img, .fluid.image img { display: block; // width: 100%; } .image.fluid.twelve { width: 50%; text-align: center; img { display: inline-block; } } .image .blank { padding: 40px; text-align: center; color: #999; border: 2px dashed #dfdfdf; }