├── .gitignore
├── README.md
├── popover-1
├── icons.png
├── index.html
├── joe.png
├── logo.svg
└── styles.css
└── popover-2
├── 1.jpg
├── 2.jpg
├── 3.jpg
├── 4.jpg
├── 5.jpg
├── 6.jpg
├── avatar.webp
├── index.html
└── styles.css
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # css-popovers
2 |
3 | Collection of popover components built using HTML and CSS
4 |
--------------------------------------------------------------------------------
/popover-1/icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/css-popovers/be3ca2f1192fc58d5af5e75b593c6983607e09a6/popover-1/icons.png
--------------------------------------------------------------------------------
/popover-1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Dropdown 3
8 |
9 |
10 |
14 |
18 |
19 |
20 |
21 |
102 |
103 |
104 |
--------------------------------------------------------------------------------
/popover-1/joe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/css-popovers/be3ca2f1192fc58d5af5e75b593c6983607e09a6/popover-1/joe.png
--------------------------------------------------------------------------------
/popover-1/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/popover-1/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | color: #5a5a5a;
3 | background: #f7f7f7;
4 | font-family: "Euclid Circular A", "Poppins";
5 | }
6 |
7 | * {
8 | box-sizing: border-box;
9 | }
10 |
11 | nav {
12 | position: fixed;
13 | top: 50%;
14 | left: 50%;
15 | border-radius: 6px;
16 | translate: -50% -90px;
17 | display: flex;
18 | align-items: center;
19 | justify-content: space-between;
20 | width: 70%;
21 | height: 72px;
22 | padding: 0 20px;
23 | background: #ffffff;
24 | box-shadow: 0 0 20px rgb(0 0 0 / 6%);
25 | }
26 |
27 | .logo {
28 | display: flex;
29 | align-items: center;
30 | }
31 |
32 | .logo img {
33 | width: 36px;
34 | padding: 0;
35 | margin-left: 4px;
36 | margin-right: 6px;
37 | }
38 |
39 | span.material-symbols-outlined {
40 | display: grid;
41 | place-items: center;
42 | width: 40px;
43 | height: 72px;
44 | font-size: 24px;
45 | }
46 |
47 | nav h2 {
48 | font-size: 19px;
49 | font-weight: 400;
50 | }
51 |
52 | .nav-right > img {
53 | width: 36px;
54 | height: 36px;
55 | border-radius: 50%;
56 | object-fit: contain;
57 | margin-left: 8px;
58 | }
59 |
60 | button {
61 | background: transparent;
62 | border: 0;
63 | color: inherit;
64 | cursor: pointer;
65 | }
66 |
67 | .nav-right {
68 | display: flex;
69 | align-items: center;
70 | }
71 |
72 | .dropdown {
73 | cursor: pointer;
74 | position: relative;
75 | display: grid;
76 | place-items: center;
77 | height: 72px;
78 | }
79 |
80 | .dropdown > button {
81 | position: relative;
82 | display: grid;
83 | place-items: center;
84 | width: 36px;
85 | height: 36px;
86 | background: transparent;
87 | }
88 |
89 | .dropdown > button::before {
90 | content: "";
91 | position: absolute;
92 | z-index: -1;
93 | top: 0;
94 | left: 0;
95 | width: 100%;
96 | height: 100%;
97 | border-radius: 50%;
98 | scale: 0.25;
99 | opacity: 0;
100 | background: #ebebeb;
101 | transition: 0.2s;
102 | }
103 |
104 | .dropdown:hover > button::before {
105 | scale: 1;
106 | opacity: 1;
107 | }
108 |
109 | .menu {
110 | overflow-x: hidden;
111 | overflow-y: auto;
112 | position: absolute;
113 | top: 64px;
114 | right: -20px;
115 | display: grid;
116 | grid-template-columns: repeat(3, 1fr);
117 | grid-auto-rows: max-content;
118 | width: 270px;
119 | max-height: 286px;
120 | padding: 10px;
121 | background: #ffffff;
122 | border-radius: 8px;
123 | border: 1px solid #ebebeb;
124 | box-shadow: 0 0 10px rgb(0 0 0 / 8%);
125 | opacity: 0;
126 | visibility: hidden;
127 | transition: 0.3s;
128 | appearance: none;
129 | }
130 |
131 | .menu::-webkit-scrollbar {
132 | width: 15px;
133 | }
134 |
135 | .menu::-webkit-scrollbar-thumb {
136 | background: #dadce0;
137 | border-radius: 10px;
138 | border: 4px solid transparent;
139 | background-clip: padding-box;
140 | }
141 |
142 | .dropdown:hover > .menu {
143 | opacity: 1;
144 | visibility: visible;
145 | }
146 |
147 | .menu > button {
148 | display: flex;
149 | align-items: center;
150 | justify-content: center;
151 | flex-direction: column;
152 | gap: 6px;
153 | font-family: inherit;
154 | }
155 |
156 | /* .menu > button:hover {
157 | background: #e8f0fe;
158 | border-radius: 6px;
159 | } */
160 |
161 | .menu > button > img {
162 | width: 64px;
163 | height: 64px;
164 | padding: 16px;
165 | }
166 |
167 | .menu > button > span:first-child {
168 | display: block;
169 | width: 64px;
170 | height: 64px;
171 | scale: 0.7;
172 | background-image: url(icons.png);
173 | background-position: 0 -3105px;
174 | background-size: 64px 3307px;
175 | background-repeat: no-repeat;
176 | }
177 |
178 | .menu > button > span:last-child {
179 | font-size: 12px;
180 | translate: 0 -12px;
181 | }
182 |
--------------------------------------------------------------------------------
/popover-2/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/css-popovers/be3ca2f1192fc58d5af5e75b593c6983607e09a6/popover-2/1.jpg
--------------------------------------------------------------------------------
/popover-2/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/css-popovers/be3ca2f1192fc58d5af5e75b593c6983607e09a6/popover-2/2.jpg
--------------------------------------------------------------------------------
/popover-2/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/css-popovers/be3ca2f1192fc58d5af5e75b593c6983607e09a6/popover-2/3.jpg
--------------------------------------------------------------------------------
/popover-2/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/css-popovers/be3ca2f1192fc58d5af5e75b593c6983607e09a6/popover-2/4.jpg
--------------------------------------------------------------------------------
/popover-2/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/css-popovers/be3ca2f1192fc58d5af5e75b593c6983607e09a6/popover-2/5.jpg
--------------------------------------------------------------------------------
/popover-2/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/css-popovers/be3ca2f1192fc58d5af5e75b593c6983607e09a6/popover-2/6.jpg
--------------------------------------------------------------------------------
/popover-2/avatar.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/css-popovers/be3ca2f1192fc58d5af5e75b593c6983607e09a6/popover-2/avatar.webp
--------------------------------------------------------------------------------
/popover-2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Popover 2
8 |
9 |
10 |
14 |
18 |
19 |
20 |
21 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/popover-2/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: "Euclid Circular A", "Poppins";
3 | }
4 |
5 | :root {
6 | --popover-height: 36px;
7 | }
8 |
9 | * {
10 | box-sizing: border-box;
11 | }
12 |
13 | .nav {
14 | position: fixed;
15 | top: 50%;
16 | right: -10px;
17 | translate: 0 -50%;
18 | display: grid;
19 | place-items: center;
20 | gap: 8px;
21 | padding: 20px;
22 | cursor: pointer;
23 | }
24 |
25 | .nav button {
26 | position: relative;
27 | display: grid;
28 | place-items: center;
29 | width: 36px;
30 | height: 36px;
31 | border-radius: 4px;
32 | border: 1px solid #e7e7e9;
33 | background: transparent;
34 | font-family: inherit;
35 | cursor: inherit;
36 | }
37 |
38 | .nav button::before {
39 | content: attr(data-tooltip);
40 | position: absolute;
41 | top: 50%;
42 | right: 42px;
43 | translate: 6px -50%;
44 | opacity: 0;
45 | visibility: hidden;
46 | background: #222222;
47 | color: #f7f7f7;
48 | padding: 3px 6px;
49 | font-size: 12px;
50 | border-radius: 4px;
51 | transition: 0.3s;
52 | }
53 |
54 | .nav button:hover::before {
55 | opacity: 1;
56 | visibility: visible;
57 | translate: 0 -50%;
58 | }
59 |
60 | .material-symbols-outlined {
61 | font-size: 18px;
62 | }
63 |
64 | .popover {
65 | position: relative;
66 | height: var(--popover-height);
67 | width: 60px;
68 | text-align: center;
69 | }
70 |
71 | .popover > img {
72 | width: var(--popover-height);
73 | height: var(--popover-height);
74 | border-radius: 50%;
75 | transition: 0.3s;
76 | }
77 |
78 | .menu {
79 | position: absolute;
80 | top: 0;
81 | right: 64px;
82 | width: 260px;
83 | padding: 16px;
84 | translate: 8px 0;
85 | opacity: 0;
86 | visibility: hidden;
87 | border-radius: 6px;
88 | background: #ffffff;
89 | box-shadow: 0 6px 50px rgb(0 0 0 / 16%);
90 | transition: 0.3s;
91 | }
92 |
93 | .menu::after {
94 | content: "";
95 | position: absolute;
96 | top: 16px;
97 | right: -5px;
98 | width: 10px;
99 | height: 10px;
100 | rotate: 45deg;
101 | background: inherit;
102 | }
103 |
104 | .popover:hover .menu {
105 | opacity: 1;
106 | visibility: visible;
107 | translate: 0;
108 | }
109 |
110 | .popover:hover > img {
111 | opacity: 0.65;
112 | }
113 |
114 | .menu header {
115 | display: flex;
116 | align-items: center;
117 | gap: 10px;
118 | margin-bottom: 10px;
119 | }
120 |
121 | h2,
122 | h3 {
123 | margin: 0;
124 | font-weight: 400;
125 | text-align: left;
126 | }
127 |
128 | .menu h2 {
129 | margin: 0;
130 | font-size: 14px;
131 | }
132 |
133 | .menu h3 {
134 | margin: 0;
135 | font-size: 11px;
136 | opacity: 0.5;
137 | }
138 |
139 | .menu header img {
140 | width: 40px;
141 | height: 40px;
142 | border-radius: 50%;
143 | }
144 |
145 | .images {
146 | display: flex;
147 | gap: 10px;
148 | overflow: auto;
149 | scroll-snap-type: x mandatory;
150 | }
151 |
152 | .images::-webkit-scrollbar {
153 | display: none;
154 | }
155 |
156 | .images img {
157 | scroll-snap-align: start;
158 | width: 108px;
159 | min-width: 108px;
160 | height: 80px;
161 | object-fit: cover;
162 | border-radius: 6px;
163 | }
164 |
--------------------------------------------------------------------------------