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

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>