Image Masking and Sliding Transition Effect

While redesigning our new ETC sites we wanted to change the styles of our image previews to better match the new look & feel. Rather than going back to PhotoShop and cropping thousands upon thousands of images we opted to let some CSS trickery do the cropping for us.

In one of our WebTreats posts: 504 Awake tileable backgrounds, we took a series of long rectangular images and converted them to circular frames where a portion is revealed at the start and the rest scrolls by as you hover. In the end it turned out to be a little more difficult to make cross browser than we anticipated, below are our results.


DEMO #1 - Transitioning Margins
( hover over the image below )

key POINTS

  • As simple as it gets. We're just transitioning the image's "left-margin" postion.
  • Works just as well transitioning "left" position.
  • PITFALLS: Transitioning anything but transforms seems choppy on Safari and doesn't benefit from hardware acceleration.

the HTML

<span class="clipping-frame">
	<img alt="" src="http://cdn.mysitemyway.com/etc-mysitemyway/tutorials/assets/posts/127/awake-soft-purple-backgrounds.jpg" />
</span>

the CSS

	
.clipping-frame {
	border: 10px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(0,0,0,.15);
	overflow: hidden;
	display:block;
	width: 320px;
	height: 320px;
	margin:20px auto;
}
.clipping-frame img {
	-webkit-transition:3s;
	transition:3s;
	margin-left:0px;
}
.clipping-frame img:hover {margin-left:-480px;cursor:pointer;}


additional RESOURCES


DEMO #2 - Transitioning Transforms
( hover over the image below )

key POINTS

  • The outer div and accompaning styles are only used to create the border effect. You can remove them if you don't need that effect.
  • PITFALL: An extra span tag is used to compensate for webkit's border masking bug.

the HTML

<span class="clipping-frame-border">
	<span class="clipping-frame">
		<img alt="" src="http://cdn.mysitemyway.com/etc-mysitemyway/tutorials/assets/posts/127/awake-soft-teal-backgrounds.jpg" />
	</span>
</span>

the CSS

	
.clipping-frame-border {
	display: block;
	width: 320px;
	height: 320px;
	border: 10px solid #fff;
	box-shadow: 0 0 10px rgba(0,0,0,.15);
	border-radius: 50%;
	margin: 20px auto;
}
.clipping-frame {
	border-radius: 50%;
	overflow: hidden;
	display: block;
	width: 320px;
	height: 320px;
	-webkit-mask-image: -webkit-linear-gradient(#000,#000);
}
.clipping-frame img {
	-webkit-transition: 3s;
	transition: 3s;
}
.clipping-frame img:hover {
	cursor: pointer;
	-webkit-transform: translate(-480px);
	transform: translate(-480px);
}

additional RESOURCES


DEMO #3 - Transitioning Background Position
( hover over the image below )

key POINTS

  • Uses only one element.
  • Just set the image you want to slide as the background.
  • PITFALLS: Choppy on Safari and does not benefit from graphics excelleration.

the HTML

	<span class="clipping-frame"></span>

the CSS

	
.clipping-frame {
	width: 320px;
	height: 320px;
	display: block;
	margin: 20px auto;
	border-radius: 50%;
	border: 10px solid #f9f9f9;
	box-shadow: 0 0 10px rgba(0,0,0,.15);
	background:url(http://cdn.mysitemyway.com/etc-mysitemyway/tutorials/assets/posts/127/awake-slate-grey-backgrounds.jpg);
	-webkit-transition: 3s;
	transition: 3s;
}
.clipping-frame:hover {
	background-position: -480px;
	cursor: pointer;
}

additional RESOURCES


Download
You might also like
Construct Wordpress Theme Dejavu Wordpress Theme Glossy Silver Web 2.0 Icon Tutorial Data URI Tileable Transparent Patterns Grunge Yellow Warning Striped Icon & Text Effect Blue Retro Grunge Text Effect and Icons Matte White Square Check Mark Icon How to use Google Analytics Content Experiments Modular Wordpress Theme Glossy Black Button Icons Create a Professional Coming Soon Landing Page PSD Template Crystal Clear Bubble Icons Method Wordpress Theme Echelon Wordpress Theme Red and White Pearl Download Icon Brushed Silver Reflective Text Effect Coffee Stain Social Networking Icons Tutorial Adding Versatile Button Shortcodes to your WordPress Theme Fusion Wordpress Theme Starfield Tileable Twitter Background Tutorial Myriad Wordpress Theme 3D Transparent Glass Text Effect Yellow Road Sign Icons Grungy Rusted Carbon Fiber Text Effect

0 comments on “Image Masking and Sliding Transition Effect

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>