FrankUICommon CSS (Spacing & Position Utilities)
FrankUI provides utility helper classes for rapid layout adjustments, positioning elements, and spacing. These utilities form the foundation for more advanced responsive interfaces.
Image Utilities
Apply sizing, responsiveness, thumbnails, and interactive hover overlays directly to images in FrankUI.
Live Layout Previews
Hover over the cards below to see zoom scaling and sliding overlays in action.
Fluid Responsive (.img-fluid)
Scales dynamically to fit the width of its parent block.
Thumbnail (.img-thumbnail)
Adds standard padding, a subtle border, and background frame.
Container Overlay (.img-container)
Combines zoom, overlays, and transition slide-up effects.
Images Reference
| Class | Properties | Description |
|---|---|---|
| .img-fluid | max-width: 100% !important; height: auto !important; | Makes an image scale responsively inside its parent wrapper |
| .img-thumbnail | padding: .25rem !important; border: 1px solid var(--secondary-color) !important; border-radius: 4px !important; | Framer thumbnail style with padding, border, and background |
| .img-container | position: relative; overflow: hidden; display: inline-block; | Position context wrapper enabling overlays and zooms |
| .zoom | transform: scale(1.08); | Applied to .img-container; zooms image slightly on hover |
| .image-overlay | position: absolute; opacity: 0; transition: opacity .3s; | Overlay block placed inside .img-container; fades in on hover |
| .slide-up | transform: translateY(100%); transition: transform .3s; | Applied to .img-container; makes overlay slide up from bottom |
Code Example
<!-- Responsive fluid image wrapper with zoom and sliding text overlay -->
<div class="img-container zoom slide-up rounded">
<img src="ocean-view.jpg" alt="Ocean View">
<div class="image-overlay">
<h4>Ocean Breeze</h4>
<p>Sunset at the coastline</p>
</div>
</div>