/*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);