it shows a transparent window with a hidden slider at right, to access to applications.
Description of what you are sharing
and code :
<head>
<style>
#box {
height: 360px;
width: 690px;
overflow: hidden;
background: linear-gradient(to top, transparent, black);
border-radius: 7px 7px;
}
#content {
height: 330px;
width: 850px;
overflow-y: auto;
}
.colonne {
width: 86px;
height: 86px;
padding:8px;
}
div {
float:left;
left:15px;
width: 690px;
height: 114px;
margin:5px;
}
.zoom div img {
transform: scale(1);
transition: .4s ease-in-out;
}
.zoom div:hover img {
filter: grayscale(100%);
transform: scale(0.9) rotate(-5deg);
}
</style>
</head>
<body>
<div id="box">
<div id="content">
<div class="zoom">
<div class="colonne" onClick="window.BTT.callHandler('trigger_named', {trigger_name: 'Action1' , closeFloatingHTMLMenu: 1} )"><img src="file:///users/my_account/...path to PNG file...."/></div>
</div>
......repeat for Action2, 3, etc....and change PNG file....
and add a trigger named : Action1, 2, 3, etc... to launch app
