CodePen

HTML

            
                 <div class="thingie">
      <h3 class="title">May we suggest&hellip;</h3>
      <ul>
        <li> <a href="/"><img src="http://products.drct2u.com/content/images/products//sz/sz057/d01sz05750wthumb.jpg" alt="" width="122" height="130" /> <span class="text"><strong class="productDescription">Some kind of product description</strong> <strong class="productPrice">&pound;75.00</strong></span></a> </li>
        <li> <a href="/"><img src="http://products.drct2u.com/content/images/products//sz/sz057/d01sz05750wthumb.jpg" alt="" width="122" height="130" /> <span class="text"><strong class="productDescription">Some kind of product description</strong> <strong class="productPrice">&pound;75.00</strong></span></a></li>
        <li> <a href="/"><img src="http://products.drct2u.com/content/images/products//sz/sz057/d01sz05750wthumb.jpg" alt="" width="122" height="130" /> <span class="text"><strong class="productDescription">Some kind of product description</strong> <strong class="productPrice">&pound;75.00</strong></span></a></li>
        <li> <a href="/"><img src="http://products.drct2u.com/content/images/products//sz/sz057/d01sz05750wthumb.jpg" alt="" width="122" height="130" /> <span class="text"><strong class="productDescription">Some kind of product description</strong> <strong class="productPrice">&pound;75.00</strong></span></a></li>
        <li> <a href="/"><img src="http://products.drct2u.com/content/images/products//sz/sz057/d01sz05750wthumb.jpg" alt="" width="122" height="130" /> <span class="text"><strong class="productDescription">Some kind of product description</strong> <strong class="productPrice">&pound;75.00</strong></span></a></li>
      </ul>
      <p><a href="/">View more</a></p>
    </div>
    <!-- END: .thingie --> 
            
          
!
via HTML Inspector

CSS

            
              .thingie {
  float: right;
  width: 95px;
	background: #333;
	color: #FFF;
	text-align: center;
	margin: 0 0 1em;
	padding: 0.5em 0;
}
.thingie .title {
	font-size: 1em;
	font-weight: bold;
	line-height: 1;
	margin: 0 0 0.5em;
	padding: 0 0.25em;
}
.thingie ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.thingie li {
	margin: 0 0 0.5em;
  float: right;
  clear: right;
}
.thingie p {
	margin: 0 0 0.5em;
	line-height: 1;
}
.thingie p a {
	color: #FFF;
	text-decoration: none;
}
.thingie p a:hover,
.thingie p a:focus {
	text-decoration: underline;
}
.thingie img {
	width: 70px;
	height: 88px;
	border: 1px solid #CCC;
}
.thingie li a {
	padding: 3px;
}
.thingie li a:hover,
.thingie li a:focus {
	display: block;
	background: #CCC;
	border: 1px solid #999;
	right: 0;
	width: 200px;
}
a .text { float: right; width: 40px; display: none; }
li:hover a .text { 
	display: block;
	
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................