<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <input type="text" value="" id="trace"/> <div id="image-dropdown" > <input checked="checked" type="radio" id="line1" name="line-style" value="1" /><label for="line1"></label> <input type="radio" id="line2" name="line-style" value="2" /><label for="line2"></label> <input type="radio" id="line3" name="line-style" value="3" /><label for="line3"></label> <input type="radio" id="line4" name="line-style" value="4" /><label for="line4"></label> <input type="radio" id="line5" name="line-style" value="5" /><label for="line5"></label> <input type="radio" id="line6" name="line-style" value="6" /><label for="line6"></label> <input type="radio" id="line7" name="line-style" value="7" /><label for="line7"></label> </div>

/*o.v.*/ #image-dropdown { /*style the "box" in its minimzed state*/ border:1px solid black; width:300px; height:50px; overflow:hidden; /*animate collapsing the dropdown from open to closed state (v. fast)*/ -moz-transition: height 0.1s; -webkit-transition: height 0.1s; -ms-transition: height 0.1s; -o-transition: height 0.1s; transition: height 0.1s; } #image-dropdown:hover { /*when expanded, the dropdown will get native means of scrolling*/ height:200px; overflow-y:scroll; /*nice and smooth expand - speed this up at your preference or remove animation altogether*/ -moz-transition: height 0.5s; -webkit-transition: height 0.5s; -ms-transition: height 0.5s; -o-transition: height 0.5s; transition: height 0.5s; } #image-dropdown input { /*hide the nasty default radio buttons. like, completely!*/ position:absolute;top:0;left:0;opacity:0; } #image-dropdown label { /*style the labels to look like dropdown options, kinda*/ display:none; margin:2px; height:100%; opacity:0.2; border-bottom-style: solid; border-color: rgba(153, 153, 153, 0.78); /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/ background:url("http://clipartix.com/wp-content/uploads/2016/04/Red-banner-clipart-picture.png") 50% 50% no-repeat; background-size: contain; background-position: center; } #image-dropdown:hover label{ /*this is how labels render in the "expanded" state. we want to see only the selected radio button in the collapsed menu, and all of them when expanded*/ display:block; } #image-dropdown label:hover { opacity:0.5; } #image-dropdown input:checked + label { /*tricky! labels immediately following a checked radio button (with our markup they are semantically related) should be fully opaque regardless of hover, and they should always be visible (i.e. even in the collapsed menu*/ opacity:1 !important; display:block; } /*pfft, nothing as cool here, just the value trace*/ #trace {margin:0 0 20px;}

/*the only js is to continuously checking the value of the dropdown. for posterity*/ var i = setInterval(function(){$("#trace").val($("input[name=line-style]:checked").val());},100);