image-transitions-on-hover

Your website's images play a massive role in the overall design, look, and branding feel of your website. However, they can do more than that. They can even be a UX resource, streamline navigation, and encourage users to engage with certain website elements over others.

Tutorial

For detailed instruction's, view Solodev's How to Use CSS to Create Image Transitions on Hover article.

Demo

Try out a working example on JSFiddle.

HTML

The tutorial contains the following basic HTML markup.

<section class="main-hero clearfix">
	<div class="col col-1">
		<div class="col-bg"></div>
		<div class="col-bar">
			<div class="col-wrapper pull-right text-center">
				<h1>Web <span>Studio</span></h1>
				<p class="hidden-xs">Create websites beyond your imagination. Evolve your web experiences and create stunning, feature-rich websites.therapist or occupational therapist with Avant!</p>
				<a class="btn btn-gold font-weight-bold" href="#">Learn More</a>
			</div>
		</div>
	</div>
	<div class="col col-2">
		<div class="col-bg"></div>
		<div class="col-bar">
			<div class="col-wrapper text-center">
				<h1>Web <span>Support</span></h1>
				<p class="hidden-xs">Web Support from launch to orbit. Solodev mission control is standing by at every stage with 24/7 U.S. based support.</p>
				<a class="btn btn-gold font-weight-bold" href="#">Learn More</a>
			</div>
		</div>
	</div>
</section>

CSS

All required CSS is contained with image-transitions-on-hover.css

External Resources

This tutorial includes the following third party resources.

<<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>