Ov-Img Utility Documentation

Examples

Centered Overlay

Classic centered layout.

Responsive Position

Text is centered on large screens and shifts to the bottom left on mobile screens.

Gradient Overlay

Vignette gradient pattern

Blur Overlay

Backdrop blur effect

Scrollable Long Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras risus nunc, tincidunt non, euismod non, molestie sed, ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Vivamus neque tortor, porta ac, dictum sodales, dapibus eget, sapien. Phasellus arcu turpis, tempus et, dignissim vitae, tempus at, augue. Curabitur ut metus. Fusce pretium. Donec et purus. Morbi eget eros. In quis urna at risus porttitor ultrices. Nunc diam odio, posuere eu, tempus id, sagittis vitae, ipsum.

Position Classes

Text can be positioned within a three by three grid.

.pos-tl

Position top-left

.pos-tc

Position top-center

.pos-tr

Position top-right

.pos-ml

Position middle-left

.pos-mc

Position middle-center

.pos-mr

Position middle-right

.pos-bl

Position bottom-left

.pos-bc

Position bottom-center

.pos-br

Position bottom-right

Responsive Positioning

You can position your text in different locations on mobile screens using these classes in conjunction with the standard positioning classes.

class="imgtxt pos-bl pos-md-mc"

.pos-md-{position} — 768px+
.pos-lg-{position} — 992px+
.pos-xl-{position} — 1200px+

Overlay System

You can add color overlays to the image. This will allow you to add and overlay to increase the contrast between image subject and the text.

Opacity

Opacity on the color overlay can be accomplished using the classes .ov-10 through .ov-90 in steps of ten.

.ov-10

.ov-20

.ov-30

.ov-40

.ov-50

.ov-60

.ov-70

.ov-80

.ov-90

Colors

The unility contains all standard Bootstrap colors and a few custom ones. The following are valid color names:

.ov-primary

.ov-secondary

.ov-success

.ov-danger

.ov-warning

.ov-info

.ov-light

.ov-dark

.ov-white

.ov-black

.ov-afblue

.ov-indigo

.ov-purple

.ov-pink

.ov-orange

.ov-teal

Rounded

You can round the edges of your images using the combination of standard Bootstrap .rounded and the .ov-rounded. Place the .ov-rounded class and Bootstrap .rounded class in your DIV tag. Note: if you round one but not the other your image will have hard and rounded corners at the same time.

Simple .ov-rounded Example

<div class="imgtxt pos-mc ov-40 ov-dark ov-rounded rounded">
	<img src="image.jpg" class="img-fluid">
	<div class="imgtxt-content">
		<h2>Overlay Title</h2>
		<p>Supporting text</p>
	</div>
</div>

Gradient Overlays

The utility includes seven gradient overlays that allow focus or contrast changes within an image. Apply the .ov-grad-{gradient} class to your DIV tag to use this nifty feature.

.ov-grad-b

bottom fade

.ov-grad-t

top fade

.ov-grad-l

left fade

.ov-grad-r

right fade

.ov-grad-vignette

faded edges

.ov-grad-spot

faded center

.ov-grad-angle

fade to bottom right

Blur Overlays

Apply blurs to the image tag class. Apply using .blur-{#} from 2-10 in increments of 2. Avoid using this often as it can create confusion.

Add this class to the image tag to blur the image. You can also use this script to un-blur on hover.


$(document).ready(function(){

	  $('.imgtxt a').hover(
		function() {
		  const $img = $(this).closest('.imgtxt').find('img');

		  // store existing blur class
		  const blurClass = ($img.attr('class').match(/blur-\d+/) || [])[0];
		  $img.data('blur-class', blurClass);

		  // remove any blur-* class
		  $img.removeClass(function(index, className) {
			return (className.match(/blur-\d+/g) || []).join(' ');
		  });
		},
		function() {
		  const $img = $(this).closest('.imgtxt').find('img');

		  // restore original blur class if it existed
		  const blurClass = $img.data('blur-class');
		  if (blurClass) {
			$img.addClass(blurClass);
		  }
		}
	  );

	});

Here's a working sample!

This Is a Header For The Image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Typography

Auto-scale text to container width with the .imgtxt-content-scale class!
Use .scale-tight for compact layouts

This Is a Header For The Image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras risus nunc, tincidunt non, euismod non, molestie sed, ipsum.

Best Practices

Use responsive positions for mobile
Use gradients for readability
Use blur sparingly
Keep text concise on small screens

Full Example


<div class="imgtxt ov-60 ov-afblue pos-mc ov-rounded rounded ov-grad-angle" style="width:300px;">
	<a href="#" class="text-white stretched-link">
		<img src="https://picsum.photos/600/400?random=9" class="img-fluid rounded blur-4" alt="">
		<div class="imgtxt-content imgtxt-content-scale">
			<h3>This Is a Header For The Image</h3>
			<p class="lead text-left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras risus nunc, tincidunt non, euismod non, molestie sed, ipsum.</p>
		</div>
	</a>
</div>

Sample Gallery

This Is a Header For The Image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras risus nunc, tincidunt non, euismod non, molestie sed, ipsum.

This Is a Header For The Image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras risus nunc, tincidunt non, euismod non, molestie sed, ipsum.

This Is a Header For The Image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras risus nunc, tincidunt non, euismod non, molestie sed, ipsum.

This Is a Header For The Image

This is a very tall image for testing.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras risus nunc, tincidunt non, euismod non, molestie sed, ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Vivamus neque tortor, porta ac, dictum sodales, dapibus eget, sapien. Phasellus arcu turpis, tempus et, dignissim vitae, tempus at, augue. Curabitur ut metus. Fusce pretium. Donec et purus. Morbi eget eros. In quis urna at risus porttitor ultrices. Nunc diam odio, posuere eu, tempus id, sagittis vitae, ipsum. Etiam molestie, purus vitae suscipit gravida, diam velit auctor nisl, vel gravida elit quam facilisis felis.

Bonus! Using the utility with videos!

This Is a Video Overlay

Overlay utilities can sit on video just like they do on images.


<div class="imgtxt ov-60 ov-afblue pos-mc ov-rounded rounded ov-grad-angle" style="aspect-ratio: 16 / 9;">
	
	<video class="imgtxt-media rounded" autoplay muted loop playsinline>
		<source src="images/test.mp4" type="video/mp4">
	</video>

	<div class="imgtxt-content">
		<h3>This Is Video Overlay Text</h3>
		<p class="lead">Overlay utilities can sit on video just like they do on images.</p>
	</div>
	
</div>

Video Hero

You can also use the utility to create video hero elements. Click here to see a sample! The hero video has a custom .hero-navbar class that works with a standard Bootstrap navbar. It is typically preferable to use a transparent navbar. To accomplish this, leave the Bootstrap navbar background class off. You can adjust the navbar text color with .navbar-dark (white text) or .navbar-light (light text) classes.

		
<div class="imgtxt hero-video-wrap ov-80 ov-dark ov-grad-angle" style="height: 100vh;width: 100%;">

	<nav class="navbar navbar-expand-xl navbar-dark hero-navbar">
		<a class="navbar-brand" href="#">Expand at xl</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>

		<div class="collapse navbar-collapse" id="navbarsExample06">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item active">
					<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Link</a>
				</li>
				<li class="nav-item">
					<a class="nav-link disabled" href="#">Disabled</a>
				</li>
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
					<div class="dropdown-menu" aria-labelledby="dropdown06">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
					</div>
				</li>
			</ul>
			<ul class="navbar-nav ml-auto">
				<li class="nav-item active">
					<a class="nav-link" href="#">Logout</a>
				</li>
			</ul>
		</div>
	</nav>

	<video class="imgtxt-media" autoplay muted loop playsinline>
		<source src="images/test.mp4" type="video/mp4">
	</video>

	<div class="imgtxt-content pos-mc-vid-hero text-white">
		<h1>Hero Heading</h1>
		<p class="lead">Overlay text on video.</p>
	</div>

</div>

Ov-Img Utility

Basic Usage

Overlay Title

The Kitchen Sink

Overlay Title

Examples

Centered Overlay

Responsive Position

Gradient Overlay

Blur Overlay

Scrollable Long Content

Position Classes

.pos-tl

.pos-tc

.pos-tr

.pos-ml

.pos-mc

.pos-mr

.pos-bl

.pos-bc

.pos-br

Responsive Positioning

Overlay System

Opacity

.ov-10

.ov-20

.ov-30

.ov-40

.ov-50

.ov-60

.ov-70

.ov-80

.ov-90

Colors

.ov-primary

.ov-secondary

.ov-success

.ov-danger

.ov-warning

.ov-info

.ov-light

.ov-dark

.ov-white

.ov-black

.ov-afblue

.ov-indigo

.ov-purple

.ov-pink

.ov-orange

.ov-teal

Rounded

Simple .ov-rounded Example

Gradient Overlays

.ov-grad-b

.ov-grad-t

.ov-grad-l

.ov-grad-r

.ov-grad-vignette

.ov-grad-spot

.ov-grad-angle

Blur Overlays

This Is a Header For The Image

Typography

This Is a Header For The Image

Best Practices

Full Example

Sample Gallery

This Is a Header For The Image

This Is a Header For The Image

This Is a Header For The Image

This Is a Header For The Image

This Is a Header For The Image

This Is a Header For The Image

Bonus! Using the utility with videos!

This Is a Video Overlay

Video Hero