Components
Thumbnail Beautifier
This is uncommon technique used by Stepofweb (Smarty author) to improve thousands of existing images without using photoshop or anything else!
Why is this important? Because conversions are the only thing that matter in any business on earth!
Completely dark backgrounds are not cropped out but most other backgrounds are!
Best for products/ecommerce!
In both examples, is exactly the same image!
Why is this important? Because conversions are the only thing that matter in any business on earth!
Completely dark backgrounds are not cropped out but most other backgrounds are!
Best for products/ecommerce!
In both examples, is exactly the same image!
Not using Smarty
Using Smarty
<div class="clearfix text-center mt-4 bg-light bg-gradient-radial-light rounded position-relative">
<div class="thumbnail-shadow-drop">
<div class="overflow-hidden position-relative">
<div class="animate-shine">
<img src="../demo.files/images/various/thumbnail_ityres.jpg" alt="..." class="img-fluid max-h-500 max-h-300-xs bg-suprime mt-5 mb-5 ml-4 mr-4 opacity-9 animate-bounceinup">
</div>
</div>
</div>
</div>
Quick Examples (more in blocks)
Note: remove
Image provided by iTyres.ro, our old client where we actually use Smarty features.
.shadow-md class to use on white background!Image provided by iTyres.ro, our old client where we actually use Smarty features.
Basic
<div class="d-block clearfix p-2 shadow-xs text-decoration-none position-relative bg-white transition-all-ease-250 rounded overflow-hidden show-hover-container">
<div class="p-5 px-2 m-0 text-center bg-gradient-radial-light rounded position-relative z-index-1 overlay-dark-hover overlay-opacity-3">
<!-- image -->
<img src="demo.files/images/various/thumbnail_ityres.jpg" alt="..." class="img-fluid bg-suprime opacity--9">
<!-- hover visible (always visible on mobile) -->
<div class="absolute-full z-index-3 text-white text-center d-flex align-items-center justify-content-center show-hover-item">
<a href="#" class="btn btn-sm btn-warning transition-hover-top">view item</a>
</div>
</div>
</div>
<a href="#" class="d-block clearfix p-2 shadow-xs text-decoration-none position-relative bg-white transition-all-ease-250 rounded overflow-hidden show-hover-container">
<div class="p-5 px-2 m-0 text-center bg-gradient-radial-light rounded position-relative z-index-1 overlay-dark-hover overlay-opacity-3">
<!-- image -->
<img src="demo.files/images/various/thumbnail_ityres.jpg" alt="..." class="img-fluid bg-suprime opacity--9">
</div>
</a>
<a href="#" class="d-block clearfix p-2 shadow-xs text-decoration-none position-relative bg-white transition-all-ease-250 rounded overflow-hidden show-hover-container">
<div class="p-5 px-2 m-0 text-center bg-white rounded position-relative z-index-1 overlay-dark-hover overlay-opacity-3">
<!-- image -->
<img src="demo.files/images/various/thumbnail_ityres.jpg" alt="..." class="img-fluid bg-suprime opacity--9">
</div>
</a>
<a href="#" class="d-block clearfix p-2 shadow-xs text-decoration-none position-relative rounded overflow-hidden transition-hover-zoom-img">
<div class="p-5 px-2 m-0 text-center bg-gradient-radial-light rounded position-relative z-index-1 overlay-dark overlay-opacity-1">
<!-- image -->
<img src="demo.files/images/various/thumbnail_ityres.jpg" alt="..." class="img-fluid bg-suprime opacity--9">
</div>
</a>
Lazyload & Format
Only a different image
<div class="d-block clearfix p-2 shadow-md text-decoration-none position-relative bg-white transition-all-ease-250 rounded overflow-hidden show-hover-container">
<div class="p-5 px-2 m-0 text-center rounded position-relative z-index-1 overlay-dark-hover overlay-opacity-3 rounded overflow-hidden bg-cover lazy"
data-background-image="demo.files/images/unsplash/products/thumb_330/julian-o-hayon-sDU_o416hlE-unsplash-min.jpg">
<!-- empty image -->
<img class="w-100" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiA5IiAvPg==" alt="...">
<!-- hover visible (always visible on mobile) -->
<div class="absolute-full z-index-3 text-white text-center d-flex align-items-center justify-content-center show-hover-item">
<a href="#" class="btn btn-sm btn-warning transition-hover-top">view item</a>
</div>
</div>
<h3 class="h6 text-center pt-2">Landscape</h3>
</div>
<div class="d-block clearfix py-2 shadow-md text-decoration-none position-relative bg-white transition-all-ease-250 rounded overflow-hidden show-hover-container">
<div class="p-5 px-2 m-0 text-center rounded position-relative z-index-1 overlay-dark-hover overlay-opacity-3 rounded overflow-hidden bg-cover lazy"
data-background-image="demo.files/images/unsplash/products/thumb_330/julian-o-hayon-sDU_o416hlE-unsplash-min.jpg">
<!-- empty image -->
<img class="w-100" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="...">
<!-- hover visible (always visible on mobile) -->
<div class="absolute-full z-index-3 text-white text-center d-flex align-items-center justify-content-center show-hover-item">
<a href="#" class="btn btn-sm btn-warning transition-hover-top">view item</a>
</div>
</div>
<h3 class="h6 text-center pt-2">Squared</h3>
</div>
<div class="d-block clearfix p-2 shadow-md text-decoration-none position-relative bg-white transition-all-ease-250 rounded overflow-hidden show-hover-container">
<div class="p-5 px-2 m-0 text-center rounded position-relative z-index-1 overlay-dark-hover overlay-opacity-3 rounded overflow-hidden bg-cover lazy"
data-background-image="demo.files/images/unsplash/products/thumb_330/julian-o-hayon-sDU_o416hlE-unsplash-min.jpg">
<!-- empty image -->
<img class="w-100" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDMiIC8+" alt="...">
<!-- hover visible (always visible on mobile) -->
<div class="absolute-full z-index-3 text-white text-center d-flex align-items-center justify-content-center show-hover-item">
<a href="#" class="btn btn-sm btn-warning transition-hover-top">view item</a>
</div>
</div>
<h3 class="h6 text-center pt-2">Portrait</h3>
</div>