HarrySeah Posted September 9, 2016 Share Posted September 9, 2016 HI, i have no good enough of the knowledge about the CSS design, i try to making the effect like Facebook, when mouse enter the people name will pop-up a small box , displaying like the people name,profile image,background image , and other 3 button in footer. i try to made it but still fail .... i dont have idea how to make a picture in-between the background image and some simple description. is not mistaken been using the CSS change the profile image position to absolute, and i guess the z-index also need higher of number .... but those of the design ... i not design similar like the facebook....or else other webpage same as the effect but the profile image show in center instead on the left side .... have any one can make a example or sample to teaching me how to do that ... thanks all for you help and in the end ...sorry for my english are not very well, i hope you understand what i mean Thanks Link to comment Share on other sites More sharing options...
Yvzslm Posted September 14, 2016 Share Posted September 14, 2016 Maybe this would be help: http://www.w3schools.com/w3css/w3css_cards.asp Link to comment Share on other sites More sharing options...
Eyad Syria-lover Posted September 14, 2016 Share Posted September 14, 2016 HI, i have no good enough of the knowledge about the CSS design, i try to making the effect like Facebook, when mouse enter the people name will pop-up a small box , displaying like the people name,profile image,background image , and other 3 button in footer. i try to made it but still fail .... i dont have idea how to make a picture in-between the background image and some simple description. is not mistaken been using the CSS change the profile image position to absolute, and i guess the z-index also need higher of number .... but those of the design ... i not design similar like the facebook....or else other webpage same as the effect but the profile image show in center instead on the left side .... have any one can make a example or sample to teaching me how to do that ... thanks all for you help and in the end ...sorry for my english are not very well, i hope you understand what i mean Thanks Sir You Can Do The Popup Effect Easily By Using CSS Display Property. First You Should Use The :hover Selector In CSS (I'am Assuming That You Have No Idea About JavaScript). You Should Create A Hidden Small-Box For Every Person You Have: .person-panel { display:block; width: /* Enter The Panel's Width Here */; height:/* Enter The Panel's Height Here*/; } Now You Have To Use The :hover Selector As Following: .person-panel:hover { display:block; } Link to comment Share on other sites More sharing options...
davej Posted September 14, 2016 Share Posted September 14, 2016 ??? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>title</title> <style> div{ margin:5px; padding:3px; } .post header{ width:200px; height:130px; border:1px solid #555; background-color: #479; } .post{ width:600px; border:1px solid #555; background-color: #bbb; } .post header div{ width:100px; } .post header .detail{ height:180px; width:400px; border:1px solid #555; display:none; } .post header:hover{ background-color: #6af; } .post header div{ cursor:pointer; } .post header div:hover .detail{ display:block; position:relative; /* puts overlay on top */ background-color: #ddd; } </style> </head> <body> <div class="post"> <header> Name: Bill<br/> Posts:123<br/> Gender:<br/> Location:<br/> Languages:<br/> <div>(See detail) <div class="detail"> This popup provides detail on this user Bill. </div> </div> </header> <p>lkjlkj jklkj jklkj lkjliou oiuy tuyt tt 78i7y poipoipoi yiuyiuy frytr rtytr rty trytr rtytr rty tyr eer tre oiuoiuoiu oiu iu uio iou uio iuui ouui iu kjkjhkjhkjh h h jh ytrytr t ytr rr tytrty</p> </div> <div class="post"> <header> Name: Sally<br/> Posts:213<br/> Gender:<br/> Location:<br/> Languages:<br/> <div>(See detail) <div class="detail"> This popup provides detail on this user Sally. </div> </div> </header> <p>lkjlkj jklkj jklkj lkjliou oiuy tuyt tt 78i7y poipoipoi yiuyiuy frytr rtytr rty trytr rtytr rty tyr eer tre oiuoiuoiu oiu ikl;k;lk oiuoiu uoiu oiu u oiuoiuuuytuyt uytuy tuyt ytuy u uio iou uio iuui ouui iu kjkjhkjhkjui yiu yuiuyiuiuyiu iuuy rrtyryt rtyr ytrgfdg dgfd dgf dfgfd rttre tretr tretr ert t ytr rr tytrtytyr eer tre oiuoiuoiu oiu iu uio iou uio iuui ouui iu kjkjhkjhkjh h h jh ytrytr r tytrt ytr rr tytrty</p> </div> <div class="post"> <header> Name: George<br/> Posts:2993<br/> Gender:<br/> Location:<br/> Languages:<br/> <div>(See detail) <div class="detail"> This popup provides detail on this user George. </div> </div> </header> <p>lkjlkj jklkj jklkj lkjliou oiuy tuyt tt 78i7y poipoipoi yiuyiuy frytr rtytr rty trytr rtytr rty tyr eer tre oiuoiuoiu oiu iu uio iou uio iuui ouui iu kjkjhkjhkjh h h jh ytrytr rtytr rty tyr eer tre oiuoiuoiu oiu ikl;k;lk oiuoiu uoiu oiu u oiuoiuuuytuyt uytuy tuyt ytuyt u uio iou uio iuui ouui iu kjkjhkjhkjh h h jh ytrytr r tytr yiuyiuy yui yiu yuiuyiuy iuyuiuy t ytr rr tytrty tyr eer tre oiuoiuoiu oiu iu uio iou uio iuui ouui iu kjkjhkjhkjh h h jh ytryt tytrt ytr rr tytrty</p> </div> </body> </html> Link to comment Share on other sites More sharing options...
Yvzslm Posted September 14, 2016 Share Posted September 14, 2016 ??? Or maybe this one: https://jsfiddle.net/bry9duok/ (lol I'm laughing what I did.) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>title</title> <style> body { background-color: grey; } .thumbnail { width: 200px; height: 300px; background-color: lightblue; text-align: center; border: 3px solid black; } .thumbnail .detail { width: 700px; height: 450px; background-color: lightblue; display: none; border: 3px solid black; } .thumbnail:hover .detail{ display:block; position: relative; bottom: 150px; left: 150px; } .miniphoto { height: 50px; width: 50px; float:left; margin: 10px; } .widephoto { height: 50px; width: 100px; float: left; margin: 10px; } </style> </head> <body> <div class="thumbnail"> <img src="http://www.pennchc.org/page/sites/all/themes/simplecorp/images/people_alumni.jpg" width="100%" height="auto"> <p><b>Name: Bill</b></p> <p><b>Posts:123</b></p> <div class="detail"> <img src="http://www.pennchc.org/page/sites/all/themes/simplecorp/images/people_alumni.jpg" height="100%" style="float:left;"> <p><b>Name: Bill</b></p> <p><b>Gender: Male</b></p> <p><b>Location: London</b></p> <p><b>Language(s): English</b></p> <hr> <p><b>Photos</b></p> <img src="https://pbs.twimg.com/profile_images/633782900077408256/F541mrSs_400x400.jpg" class="miniphoto"> <img src="http://amaghana.com/wp-content/uploads/2016/02/5-happy-people-thumbs-up-web.jpg" class="widephoto"> <img src="http://www.priotime.com/wp-content/uploads/2013/10/Happy-People-Prioritize.jpg" class="miniphoto"> <img src="http://st2.depositphotos.com/4358523/6552/v/450/depositphotos_65527221-People-hanging-out-at-beach.jpg" class="miniphoto"> <img src="https://lostploring.files.wordpress.com/2014/10/wpid-img_41472-jpg.jpeg" class="miniphoto"> <img src="http://littletravelgypsy.net/wp-content/uploads/2014/11/CROATIA3.jpg" class="miniphoto"> <img src="http://65.media.tumblr.com/ea55986580bdeb9ad329c7e41e41f7c5/tumblr_nzfdis8z791qearaqo1_1280.jpg" class="miniphoto"> <img src="http://m1.i.pbase.com/o2/93/329493/1/148891541.eFRtEajP.AccraFeb13147.jpg" class="miniphoto"> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now