Skip to content

Commit ddc4324

Browse files
web-tikiweb-tiki
committed
Merge pull request #7 from web-tiki/Hover-effect-optimization
Hover effect optimization and fix issues #4, issue #6 and issue #5
2 parents d552dcd + dc2a920 commit ddc4324

File tree

2 files changed

+45
-115
lines changed

2 files changed

+45
-115
lines changed

‎hexagons.css

Lines changed: 44 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
}
55

66
body {
7-
font-family: 'Open Sans', arial, sans-serif;
87
background: rgb(123, 158, 158);
98
}
109

@@ -13,6 +12,8 @@ body {
1312
width: 90%;
1413
margin: 0 auto;
1514
padding:0.866% 0;
15+
font-family: 'Raleway', sans-serif;
16+
font-size: 15px;
1617
}
1718

1819
#hexGrid:after {
@@ -27,14 +28,16 @@ body {
2728
float: left;
2829
overflow: hidden;
2930
visibility: hidden;
30-
-webkit-transform: rotate(-60deg) skewY(30deg);
31-
-ms-transform: rotate(-60deg) skewY(30deg);
32-
transform: rotate(-60deg) skewY(30deg);
31+
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
32+
-webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
33+
-ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
34+
transform: rotate(-60deg) skewY(30deg) translatez(-1px);
3335
}
3436

3537
.hex * {
3638
position: absolute;
3739
visibility: visible;
40+
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
3841
}
3942

4043
.hexIn {
@@ -47,8 +50,6 @@ body {
4750
-webkit-transform: skewY(-30deg) rotate(60deg);
4851
-ms-transform: skewY(-30deg) rotate(60deg);
4952
transform: skewY(-30deg) rotate(60deg);
50-
-webkit-backface-visibility: hidden;
51-
backface-visibility: hidden;
5253
}
5354

5455

@@ -60,56 +61,65 @@ body {
6061
width: auto;
6162
height: 100%;
6263
margin: 0 auto;
64+
-webkit-transform: translatez(-1px);
65+
-ms-transform: translatez(-1px);
66+
transform: translatez(-1px);
6367
}
6468

6569
.hex h1, .hex p {
66-
width: 90%;
67-
padding: 0 5%;
68-
background-color: #008080;
69-
background-color: rgba(0, 128, 128, 0.8);
70-
font-family: 'Raleway', sans-serif;
71-
-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
72-
transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
70+
width: 102%;
71+
left:-1%; /* prevent line on the right where background doesn't cover image */
72+
padding: 5%;
73+
box-sizing:border-box;
74+
background-color: rgba(0, 128, 128, 0.8);
75+
font-weight: 300;
76+
-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
77+
transition: transform .2s ease-out, opacity .3s ease-out;
78+
-webkit-font-smoothing: subpixel-antialiased; /* fix for font antialiasing after hover transition */
7379
}
7480

7581
.hex h1 {
76-
bottom: 110%;
77-
font-style: italic;
78-
font-weight: normal;
82+
bottom: 50%;
83+
padding-top:50%;
7984
font-size: 1.5em;
80-
padding-top: 100%;
81-
padding-bottom: 100%;
85+
z-index: 1;
86+
-webkit-transform:translateY(-100%) translatez(-1px);
87+
-ms-transform:translateY(-100%) translatez(-1px);
88+
transform:translateY(-100%) translatez(-1px);
8289
}
8390

8491
.hex h1:after {
8592
content: '';
86-
display: block;
8793
position: absolute;
88-
bottom: -1px;
94+
bottom: 0;
8995
left: 45%;
9096
width: 10%;
9197
text-align: center;
92-
z-index: 1;
93-
border-bottom: 2px solid #fff;
98+
border-bottom: 1px solid #fff;
9499
}
95100

96101
.hex p {
97-
padding-top: 50%;
98-
top: 110%;
99-
padding-bottom: 50%;
102+
top: 50%;
103+
padding-bottom:50%;
104+
-webkit-transform:translateY(100%) translatez(-1px);
105+
-ms-transform:translateY(100%) translatez(-1px);
106+
transform:translateY(100%) translatez(-1px);
100107
}
101108

102109

103110
/* HOVER EFFECT */
104111

112+
105113
.hexIn:hover h1 {
106-
bottom: 50%;
107-
padding-bottom: 10%;
114+
-webkit-transform:translateY(0%) translatez(-1px);
115+
-ms-transform:translateY(0%) translatez(-1px);
116+
transform:translateY(0%) translatez(-1px);
108117
}
109118

110119
.hexIn:hover p {
111-
top: 50%;
112-
padding-top: 10%;
120+
-webkit-transform:translateY(0%) translatez(-1px);
121+
-ms-transform:translateY(0%) translatez(-1px);
122+
transform:translateY(0%) translatez(-1px);
113123
}
114124

115125
/* SPACING AND SIZING */
@@ -245,3 +255,8 @@ body {
245255
clear: left;
246256
}
247257
}
258+
@media (max-width: 400px) {
259+
#hexGrid {
260+
font-size: 13px;
261+
}
262+
}

‎index.html

Lines changed: 1 addition & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
<title></title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link rel="stylesheet" type="text/css" href="hexagons.css">
8-
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'>
9-
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,300,200,100,900' rel='stylesheet' type='text/css'>
8+
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
109
</head>
1110
<body>
1211

@@ -235,90 +234,6 @@ <h1>This is a title</h1>
235234
<p>Some sample text about the article this hexagon leads to</p>
236235
</a>
237236
</li>
238-
<li class="hex">
239-
<a class="hexIn" href="#">
240-
<img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" />
241-
<h1>This is a title</h1>
242-
<p>Some sample text about the article this hexagon leads to</p>
243-
</a>
244-
</li>
245-
<li class="hex">
246-
<a class="hexIn" href="#">
247-
<img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" />
248-
<h1>This is a title</h1>
249-
<p>Some sample text about the article this hexagon leads to</p>
250-
</a>
251-
</li>
252-
<li class="hex">
253-
<a class="hexIn" href="#">
254-
<img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" />
255-
<h1>This is a title</h1>
256-
<p>Some sample text about the article this hexagon leads to</p>
257-
</a>
258-
</li>
259-
<li class="hex">
260-
<a class="hexIn" href="#">
261-
<img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" />
262-
<h1>This is a title</h1>
263-
<p>Some sample text about the article this hexagon leads to</p>
264-
</a>
265-
</li>
266-
<li class="hex">
267-
<a class="hexIn" href="#">
268-
<img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
269-
<h1>This is a title</h1>
270-
<p>Some sample text about the article this hexagon leads to</p>
271-
</a>
272-
</li>
273-
<li class="hex">
274-
<a class="hexIn" href="#">
275-
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
276-
<h1>This is a title</h1>
277-
<p>Some sample text about the article this hexagon leads to</p>
278-
</a>
279-
</li>
280-
<li class="hex">
281-
<a class="hexIn" href="#">
282-
<img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" />
283-
<h1>This is a title</h1>
284-
<p>Some sample text about the article this hexagon leads to</p>
285-
</a>
286-
</li>
287-
<li class="hex">
288-
<a class="hexIn" href="#">
289-
<img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" />
290-
<h1>This is a title</h1>
291-
<p>Some sample text about the article this hexagon leads to</p>
292-
</a>
293-
</li>
294-
<li class="hex">
295-
<a class="hexIn" href="#">
296-
<img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" />
297-
<h1>This is a title</h1>
298-
<p>Some sample text about the article this hexagon leads to</p>
299-
</a>
300-
</li>
301-
<li class="hex">
302-
<a class="hexIn" href="#">
303-
<img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" />
304-
<h1>This is a title</h1>
305-
<p>Some sample text about the article this hexagon leads to</p>
306-
</a>
307-
</li>
308-
<li class="hex">
309-
<a class="hexIn" href="#">
310-
<img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
311-
<h1>This is a title</h1>
312-
<p>Some sample text about the article this hexagon leads to</p>
313-
</a>
314-
</li>
315-
<li class="hex">
316-
<a class="hexIn" href="#">
317-
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
318-
<h1>This is a title</h1>
319-
<p>Some sample text about the article this hexagon leads to</p>
320-
</a>
321-
</li>
322237
</ul>
323238
</body>
324239
</html>

0 commit comments

Comments
 (0)