Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Hover Makes CMS Option Buttons Appear Tutorial

Published :
Author :
Adam Khoury
Learn to use CSS and HTML to make things magically appear exactly where you want them when the user hovers over anything on your web page. This sort of code would be applied usually to Content Management Systems or social networking websites in which there is an owner of the content that you want to give editing options to for that specific content. Normal visitors would not get to see the magic buttons appear. <!DOCTYPE HTML> <html> <head> <style> div#box1{border:#999 2px solid; width:200px; height:200px;} div#box1 > img{position:absolute; z-index:2000; width:200px; max-height:200px;} div#box1 > a { display: none; position:absolute; margin:90px 0px 0px 120px; /* margin:top right btm left; */ z-index:3000; background: #F0F0F0; border:#666 1px solid; border-radius:3px; padding:5px; font-size:12px; text-decoration:none; color:#333; } div#box1:hover a { display: block; } </style> </head> <body> <div id="box1"> <a href="#">Change Profile Photo</a> <img src="avatar.png" alt="pic"> </div> </body> </html>