Show clickable image on link hover

Here is a small snippet so you can show an image when hovering a link. The image is clickable and absolute positioned in relativity to his link holder. You can use multiple links on the same page just by adding the corespondent class to the link and the image that you want to be showed when making hover over the link.

This is the purely CSS solution and it doesn't include any javascript, jQuery or any other library at all. Please feel free to use it in any of your projects, and let know what you think.

My pretty awesome long text link
My pretty awesome link
Short link
My hover image text just in case
Download source code 
<style>

	a.demo_img {
		display: block;
		width:300px;
		position:relative;
		line-height:25px;
	}
	
	a.demo_img>div {
		position:absolute;
		padding:0;
		margin:0;
		left: 155px; /* change this value to one that works best for you */
		top: -18px; /* change this value to one that works best for you */
		background: transparent url(/generator/show-clickable-imge-link-on-hover_files/arrow-down-grey.png) left 23px no-repeat;
		
		opacity:0;
		height: 0;
		overflow: hidden;
		
		/* Enable transitions */
		/*-webkit-transition: all .3s ease .15s;
		-moz-transition: all .3s ease .15s;
		-o-transition: all .3s ease .15s;
		-ms-transition: all .3s ease .15s;
		transition: all .3s ease .15s;*/
	}
	
	a.demo_img>div img {
		padding:8px;
		margin-left:4px;
		border:1px solid #BCBDC0;
		background-color:#BCBDC0;
		-webkit-border-radius: 5px;
	   	   -moz-border-radius: 5px;
		    	border-radius: 5px;
		
		-webkit-box-sizing:border-box; 
		   -moz-box-sizing:border-box; 
				box-sizing:border-box;
	}
	a.demo_img:hover>div {
		
		opacity:1;
		height: 200px;
		padding: 8px;   
		
		z-index:1;
	}
	
</style>
<a href="#" class="demo_img" title="" target="_blank">
	My pretty awesome long text link
	<div><img src="/generator/show-clickable-imge-link-on-hover_files/CSS3-logo.jpg" alt="" /></div>
</a>

<a href="#" class="demo_img" title="">
	My pretty awesome link 
	<div><img src="/generator/show-clickable-imge-link-on-hover_files/android-logo.jpg" alt="" /></div>
</a>

<a href="#" class="demo_img" title="" target="_blank">
	Short link
	<div><img src="/generator/show-clickable-imge-link-on-hover_files/css3_logo.jpg" alt="" /></div>
</a>
<a href="#" class="demo_img" title="" target="_blank">
	My hover image text just in case
	<div><img src="/generator/show-clickable-imge-link-on-hover_files/logo-html5-css3.jpg" alt="" /></div>
</a>