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
Red and White Pearl Download Icon Blue Retro Grunge Text Effect and Icons Watercolor Social Networking Icons Create a Professional Coming Soon Landing Page PSD Template Data URI Tileable Transparent Patterns Starfield Tileable Twitter Background Tutorial Elegance Wordpress Theme Adding Column Layout Shortcodes to Your WordPress Theme Yellow Road Sign Icons Echelon Wordpress Theme Coffee Stain Social Networking Icons Tutorial Matte White Square Check Mark Icon Glossy Black Button Icons Brushed Silver Reflective Text Effect How to use Google Analytics Content Experiments Crystal Clear Bubble Icons Myriad Wordpress Theme Dejavu Wordpress Theme 3D Transparent Glass Text Effect Method Wordpress Theme Persuasion Wordpress Theme Modular Wordpress Theme Construct Wordpress Theme Glossy Silver Web 2.0 Icon Tutorial

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>