Youtube link - click here
<html>
<head>
<title>
Notification bar
</title>
<style>
#container {
width: 300px;
height: 60px;
display: flex;
margin: 0px auto;
flex-wrap: wrap;
transition: 1s;
justify-content: center;
background-color: #f8da5b;
border-radius: 12px;
border: 1px solid rgb(131, 130, 130, 0.3);
}
.icons>a {
display: none;
}
.icons>img {
width: 30px;
height: 30px;
}
.icons {
margin: 15px;
transition: 1s;
}
.icons:hover {
padding: 10px;
background-color: white;
border-radius: 10px;
}
#container:hover {
height: 250px;
background-image: linear-gradient(to bottom, #f8da5b, #fdffab, #e7eaf6);
}
#container:hover>.icons {
margin: 20px;
}
</style>
</head>
<body>
<div id="container">
<div class="icons">
<a href="https://icons8.com/icon/88169/internet">Internet icon by Icons8</a>
<img src="https://img.icons8.com/material-outlined/24/000000/internet.png" />
</div>
<div class="icons">
<a href="https://icons8.com/icon/5oY2QALctWFL/wifi">Wifi icon by Icons8</a>
<img src="https://img.icons8.com/external-flatart-icons-solid-flatarticons/64/000000/external-wifi-hotel-services-flatart-icons-solid-flatarticons.png" />
</div>
<div class="icons">
<a href="https://icons8.com/icon/96315/silent-call">Silent Call icon by Icons8</a>
<img src="https://img.icons8.com/material-rounded/24/000000/silent-call.png" />
</div>
<div class="icons">
<a href="https://icons8.com/icon/iY1paN6ZlUVc/flashlight">Flashlight icon by Icons8</a>
<img src="https://img.icons8.com/external-photo3ideastudio-lineal-photo3ideastudio/24/000000/external-flashlight-emergency-photo3ideastudio-lineal-photo3ideastudio.png" />
</div>
<div class="icons">
<a href="https://icons8.com/icon/59877/screenshot">Screenshot icon by Icons8</a>
<img src="https://img.icons8.com/ios-glyphs/50/000000/screenshot.png" />
</div>
<div class="icons">
<a href="https://icons8.com/icon/69592/bluetooth">Bluetooth icon by Icons8</a>
<img src="https://img.icons8.com/ios-glyphs/30/000000/bluetooth.png" />
</div>
<div class="icons">
<a href="https://icons8.com/icon/88169/internet">Internet icon by Icons8</a>
<img src="https://img.icons8.com/material-outlined/24/000000/internet.png" />
</div>
<div class="icons">
<a href="https://icons8.com/icon/78759/brightness">Brightness icon by Icons8</a>
<img src="https://img.icons8.com/ios-glyphs/50/000000/brightness-settings.png" />
</div>
<div class="icons">
<a href="https://icons8.com/icon/2320/airplane-mode-on">Airplane Mode On icon by Icons8</a>
<img src="https://img.icons8.com/ios/30/000000/airplane-mode-on.png" />
</div>
<div class="icons">
<a href="https://icons8.com/icon/wckvK9lHhRmH/lock-screen">Lock Screen icon by Icons8</a>
<img src="https://img.icons8.com/ios/50/000000/lock-screen.png" />
</div>
<div class="icons">
<a href="https://icons8.com/icon/60029/location">Location icon by Icons8</a>
<img src="https://img.icons8.com/ios-glyphs/50/000000/worldwide-location.png" />
</div>
<div class="icons">
<a href="https://icons8.com/icon/39211/scanner">Scanner icon by Icons8</a>
<img src="https://img.icons8.com/ios/50/000000/scanner.png" />
</div>
</div>
<script>
var i;
var container = document.getElementById("container");
var icons = document.getElementsByClassName('icons');
for (i = 5; i < icons.length; i++) {
icons[i].style.display = "none";
}
container.addEventListener('mouseover', function() {
for (i = 5; i < icons.length; i++) {
icons[i].style.display = "inline-block";
}
})
container.addEventListener('mouseout', function() {
for (i = 5; i < icons.length; i++) {
icons[i].style.display = "none";
}
})
</script>
</body>
</html>
Post a Comment