ThemeSwitcher + Preview

styles.css

/* Preview hover styles */
#theme_list ul li {
	position:relative;
}
.product-preview{
	position:absolute;
	left:100%;
	top:-1px;
	margin-left:1px;
	background:#222;
	padding:3px;
	display:none;
}
.product-preview img{
	display:block;
	opacity:0;
}

#theme_list ul li a:hover .product-preview{
	display:block;
}
#theme_list ul li a:hover .product-preview img{
	display:block;
	opacity:1;
}



/* Product Type Styles */
.product-type{
	position:absolute;
	right:6px;
	top:8px;
	padding:3px;
	
	color: #222;
	background: #e6e6e6; /* Old browsers */
	background: #e6e6e6 -moz-linear-gradient(top, rgba(255,255,255,.1) 0%, rgba(0,0,0,.1) 100%); /* FF3.6+ */
	background: #e6e6e6 -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.1)), color-stop(100%,rgba(0,0,0,.1))); /* Chrome,Safari4+ */
	background: #e6e6e6 -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.1) 100%); /* Chrome10+,Safari5.1+ */
	background: #e6e6e6 -o-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.1) 100%); /* Opera11.10+ */
	background: #e6e6e6 -ms-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.1) 100%); /* IE10+ */
	background: #e6e6e6 linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.1) 100%); /* W3C */	
	background: #e6e6e6 -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(0,0,0,.1) 100%); /* Chrome10+,Safari5.1+ */
	
	box-shadow:inset 0px 1px 1px rgba(255,255,255,.6);
		
	text-transform:uppercase;
	font-size:9px;
	
	opacity:.9;
	
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}

#theme_list ul li a:hover .product-type{
	opacity:1;
}

themeswitcher.php

<?php

//Theme Array
$theme_array = array (

	'Agility-HTML'	=>	array (
		"id" 			=> "Agility",
		'type'			=> "Responsive HTML5",
		"url" 			=> "http://agility-html.sevenspark.com",
		"themeforest" 	=> "http://themeforest.net/item/agility-responsive-minimal-html5/1054063",
		"preview"		=> "agility_html.jpg",
		"mobile_redirect" => true,
	),
	
	
	'UberMenu'	=> array(
		"id" 			=> "UberMenu - Mega Menu",
		"type"			=> "WP Plugin",
		"url" 			=> "http://wpmegamenu.com",
		"themeforest" 	=> "http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703",
		"preview"		=> "http://0.s3.envato.com/files/1967560/megamenupreview.1.1.2.jpg"
	),
	'ScrollCheckpoint' => array(
		"id" 			=> "Scroll Checkpoint",
		"type"			=> "WP Plugin",
		"url" 			=> "http://scrollcheckpoint.sevenspark.com",
		"themeforest" 	=> "http://codecanyon.net/item/scroll-checkpoint-animated-content-panel-plugin/234882",
		"preview"		=> "scroll_checkpoint.jpg",
	),
	'MenuManager'	=> array(
		"id" 			=> "Menu Management Enhancer",
		"type"			=> "WP Plugin",
		"url" 			=> "http://menumanager.sevenspark.com",
		"themeforest" 	=> "http://codecanyon.net/item/menu-management-enhancer-for-wordpress/529353",
		"preview"		=> "menu_manager.jpg",
	),
);



//List Loop
?>

<ul>
			
	<?php
	
	foreach ($theme_array as $i => $theme) :
		
		echo '<li><a href="#" rel="' . $theme['url'] . ',' . $theme['themeforest'] . '?ref=sevenspark">' . 
				ucfirst($theme['id']) . 
				' <span class="product-type">'.$theme['type'].'</span>';
							
		if(isset($theme['preview'])){
			echo '<span class="product-preview"><img src="';
						
			if(strpos($theme['preview'], 'http://') === false){
				echo 'product_previews/'.$theme['preview'];
			}
			else echo $theme['preview'];
			
			echo '" /></span>';
		}
		echo '</a></li>';
				
	endforeach;
				
	?>
				
</ul>