Jump to content

how to making like Facebook pop-up effect?


HarrySeah

Recommended Posts

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

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

???

<!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

 

???

 

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">
<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>
</div>
</div>
</body>
</html>

 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...