Created
May 2, 2022 19:18
-
-
Save 0x3rv/068bcc64dbd736f8ac86a636f08a4d22 to your computer and use it in GitHub Desktop.
Pop Up Menue
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" alt="apple icon" onmouseover = "reveal()" onmouseout = "cancel()" /> | |
| <img src="http://vignette2.wikia.nocookie.net/logopedia/images/e/ee/Windows_logo_%E2%80%93_2012_(dark_blue).svg/revision/latest/scale-to-width-down/195?cb=20160311195341" alt="windows logo" onmouseover = "reveal()" onmouseout = "cancel()" /> | |
| <img src="https://image.freepik.com/free-vector/android-boot-logo_634639.jpg" alt="android logo" onmouseover = "reveal()" onmouseout = "cancel()" /> | |
| <!-- <button onclick="Raise()"> --> | |
| <img src="https://yt3.ggpht.com/-W47-PbvjOv4/AAAAAAAAAAI/AAAAAAAAAAA/KK8r3E8MMz0/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="google logo" onmouseover = "reveal()" onmouseout = "cancel()" /> | |
| <!-- </button> --> | |
| </div> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var timer; | |
| function reveal() { | |
| timer = setTimeout(function(){ alert("Hello"); }, 1000); | |
| } | |
| function cancel() { | |
| clearTimeout(timer); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container { | |
| /* border: 5px dashed #ccc; */ | |
| border-bottom: solid; | |
| width: 450px; | |
| height: 200px; | |
| margin: 0 auto; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| /* styles imgages in that container */ | |
| .container > img { | |
| position: absolute; | |
| width: 64px; | |
| bottom: -40px; | |
| border: 1px solid; | |
| height: 64px; | |
| transition: all .4s ease; | |
| cursor: pointer; | |
| } | |
| .container > img:first-child { | |
| left: 30px; | |
| } | |
| .container >img:nth-child(2){ | |
| left: 130px; | |
| } | |
| .container >img:nth-child(3){ | |
| left: 230px; | |
| } | |
| .container >img:nth-child(4){ | |
| left: 330px; | |
| } | |
| .container > img:hover { | |
| bottom: -25px; | |
| } | |
| .container > img.active { | |
| bottom: 0px; | |
| } | |
| .container > img:click { | |
| bottom: 10px; | |
| } | |
| /* #google { | |
| border-bottom: solid; | |
| width: 100px; | |
| height: 100px; | |
| margin: 0 auto; | |
| /* overflow: hidden; */ | |
| /* position: relative; | |
| */ | |
| /* } */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment