Simple image toggle effect

simple image toggle phone

Clean and simple image toggle effect to switch between 2 different images.

See a working example here

jQuery

    
$(".fade-phone").hide();
$(".phone-w").css({"border-bottom":"4px solid red"});
$(".phone-b").click(function(){
	$(".fade-phone").fadeIn(1000);
	$(".phone-b").css({"border-bottom":"4px solid red"});    
	$(".phone-w").css({"border":"none"});
});
$(".phone-w").click(function(){
	$(".fade-phone").fadeOut(1000);
	$(".phone-w").css({"border-bottom":"4px solid red"});    
	$(".phone-b").css({"border":"none"});
});

CSS


body {background: #666666;}
.phone-wrapper {width:255px;margin:50px auto;}
.phone-cont {position:relative;width:250px;height:490px;margin-right:25px;}
.simulator {position: absolute; width:250px; height:490px; background: url("phone-white.jpg") no-repeat 0 0;}     
.lock-screen {position: absolute; width:230px; height:308px; margin:80px 0px 0px 23px; background: url("lock-screen.png") no-repeat 0 0; }
.phone-img {position: absolute; width:241px; max-height:362px; margin:80px 0px 0px 23px; border:0px;} 
.fade-phone {position: absolute; width:241px; height:566px; background: url("phone-black.jpg") no-repeat 0 0;}
.phone-w, .phone-b {right:-0;position: absolute; width:17px;height:33px;background: #e8e8e8;margin:80px -20px 0 0;border-radius:3px;cursor:pointer;}
.phone-b {background: #000000; margin:130px -20px 0 0;}

HTML


<div class="wrapper">
	<div class="phone-wrapper left">
		<div class="phone-cont">
		<div class="simulator"></div>
		<div class="fade-phone"></div>
		<div class="phone-img"></div>
		<div class="lock-screen"></div>
		<div class="phone-w" title="white phone"></div>
		<div class="phone-b" title="black phone"></div>
		</div>
	</div><!--phone-wrapper -->
</div><!-- image-wrap -->

Leave a Reply

Your email address will not be published.

Views: 158