CSS

Bootstrap Utility Example

p-4 rounded-4 shadow m-auto position-relative overflow-hidden

Css

Custom Callout Example

callout

Css

.callout {
width: 100%;
max-width: 850px;
}
.callout > * {
max-width: 65ch;
z-index:1;
}
.callout::after {
       content: "";
    background: url(data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/LS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9InJnYmEoODUsIDAsIDI1NSwgMSkiIGNsYXNzPSJiaSBiaS1hc3RlcmlzayIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCAwYTEgMSAwIDAgMSAxIDF2NS4yNjhsNC41NjItMi42MzRhMSAxIDAgMSAxIDEgMS43MzJMMTAgOGw0LjU2MiAyLjYzNGExIDEgMCAxIDEtMSAxLjczMkw5IDkuNzMyVjE1YTEgMSAwIDEgMS0yIDBWOS43MzJsLTQuNTYyIDIuNjM0YTEgMSAwIDEgMS0xLTEuNzMyTDYgOCAxLjQzOCA1LjM2NmExIDEgMCAwIDEgMS0xLjczMkw3IDYuMjY4VjFhMSAxIDAgMCAxIDEtMXoiLz4KPC9zdmc+);
    position: absolute;
    height: 200px;
    background-position: center;
    right: 0;
    top: 0;
    background-size: 100%;
    z-index: 0;
    transform: translate(20%, -20%) rotate(45deg);
    background-repeat: no-repeat;
    aspect-ratio: 1/1;
    opacity: 0.6;
}

Align end

price-align

Css

.price-align {
text-align: end;
}

Box Shadow - Subtle

custom-box-shadow-subtle

Css

.custom-box-shadow-subtle {
    border-radius: 10px;
    border: 2px solid #eee; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    padding: 15px;
    margin: 10px;
}

Box Shadow - Moderate

custom-box-shadow-moderate

Css

.custom-box-shadow-moderate {
    border-radius: 10px;
    border: 2px solid #eee; 
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    padding: 15px;
    margin: 10px;
}

Box Shadow - Prominent

custom-box-shadow-prominent

Css

.custom-box-shadow-prominent {
    border-radius: 10px;
    border: 2px solid #eee; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.2); 
    padding: 15px;
    margin: 10px;
}

Box - Hover

custom-box-hover

Css

.custom-box-hover:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); 
}

Box - Shift

custom-box-shift

Css

.custom-box-shift:hover
{
transition: transform 0.3s ease-out;
transform: translateY(-5px);
}

Rounded Image - Poster

custom-image

Css

.custom-image img {
  border-radius: 2rem;
  padding: 5px; 
  max-width: 100%; 
  display: block; 
  margin-bottom: 10px;
}

Image - Hover Transparency

custom-image-transparency

Css

.custom-image-transparency:hover
{
opacity: 0.7;
}

Image - Dark - Light on Hover - Green H2

custom-dark-image

Css

.custom-dark-image {
  position: relative; 
  overflow: hidden; 
}
.custom-dark-image:hover h2{
  color: #c6d957;
  transition: color 0.3s ease;
}
.custom-dark-image::before
{
content: ''; 
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
background-color: rgba(0, 0, 0, 0.4);
transition: background-color 0.3s ease;
z-index: 2;
}
.custom-dark-image:hover::before
{
background-color: rgba(0, 0, 0, 0.0);
}
.custom-dark-image > div:last-child { 
position: relative;
  z-index: 3; 
}

Image - GrayScale to Color - Hover

custom-greyscale-image

Css

.custom-greyscale-image img
{
filter: grayscale(100%) !important;
transition: filter 0.5s ease;
}
.custom-greyscale-image:hover img
{
filter: grayscale(0%) !important;
}

Image - Zoom Hover

custom-image-zoom

Css

.custom-image-zoom img {
transition: transform 0.3s ease;
}
.custom-image-zoom:hover img {
transform: scale(1.02);
}