Scrolling Text Overlay :hover

Caption title

Est laborum banjo chillwave voluptate consequat, accusamus meditation keytar mumblecore brunch edison bulb cliche nulla craft beer. Brunch in officia, bespoke intelligentsia small batch meditation roof party enim sustainable pariatur live-edge prism. Est four dollar toast migas swag, adipisicing small batch stumptown schlitz. Forage bushwick subway tile tumeric. Migas godard tattooed skateboard chartreuse disrupt four dollar toast

		<article class="caption">
	    	<img class="caption__media" src="IMG_3124.jpg" />
	   		<div class="caption__overlay">
	        	<h1 class="caption__overlay__title">Caption title</h1>
	        	<p class="caption__overlay__content">Lorem ipsum doler sit dui amet.</p>
	    	</div>
		</article>

.caption { position: relative; overflow: hidden; } .caption__media { display: block; min-width: 100%; max-width: 100%; height: auto; } .caption__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 10px; color: white; transform: translateY(100%); transition: transform .35s ease-out; } .caption:hover .caption__overlay { transform: translateY(0); } .caption__overlay__title { margin: 0; padding: 0 0 12px; transform: translateY( calc(-100% - 10px) ); /* +10px overlay padding */ transition: transform .35s ease-out; } .caption:hover .caption__overlay__title { transform: translateY(0); } .caption::before { content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; transition: background .35s ease-out; } .caption { transform: translateZ(0); }

Scrolling Text Overlay on click

Caption title

<article class="caption"> <img class="caption__media" src="IMG_3124.jpg" /> <div class="caption__overlay"> <h1 class="caption__overlay__title">Caption title</h1> <p class="caption__overlay__content">Lorem ipsum doler sit dui amet.</p> </div> </article> .caption-click { position: relative; overflow: hidden; margin: 0 auto; width: 600px; } .caption__media-click { display: block; min-width: 100%; max-width: 100%; height: auto; } .caption__overlay-click { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 40px 20px; color: black; background: rgba(255,255,255,.5); transform: translateY(100%); transition: transform .35s ease-out; } .caption__overlay__content-click { padding: 0 40px; } .caption__overlay__title-click { margin: 40px ; padding: 0 0 12px; transform: translateY( calc(-100% - 10px) ); /* +10px overlay padding */ transition: transform .35s ease-out; } .caption-click.active .caption__overlay-click { -webkit-transform: translateY(0); transform: translateY(0); } .caption__overlay__title-click.active span{ color:#222; } .caption__overlay__title-click.active{ -webkit-transform: translateY(0); transform: translateY(0); } .caption-click::before { content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; transition: background .35s ease-out; } .caption-click { transform: translateZ(0); } $j(document).ready(function() { $j(".caption__overlay__title-click span").click(function() { $j(this).closest('.caption__overlay__title-click').toggleClass('active'); $j(this).closest('.caption__overlay__title-click').prev(".caption-click").toggleClass('active'); $j(this).html( $j(this).text() == 'Read more' ? 'Close' : 'Read more' ); }); $j(".title1").click(function() { $j(this).parent().siblings(".caption-click").toggleClass('active'); $j(this).html( $j(this).text() == 'Read more' ? 'Close' : 'Read more' ); }); });