I have a grid of hexagons that don't display hover effects when their shape is changed to squares. I am using the effects from this library https://github.com/IanLunn/Hover ( https://cdn.bootcss.com/hover.css/2.1.1/css/hover.css )
Does anyone know how to fix this?
Any help would be appreciated. Cheers............................................................................................................................................................
/* grid of hexagons */
.hex-background {
background-size: cover;
background-position: center;
display: inline-block;
cursor: pointer;
}
.hex-background .text {
opacity: 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 20px;
}
.hex-background:hover .text {
text-align: center;
margin-top: 51%;
opacity: 1;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.grid {
width: 90%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
}
.grid li {
list-style-type: none;
position: relative;
float: left;
width: 18%;
padding-bottom: 20.78461%;
-o-transform: rotate(-60deg) skewY(30deg);
-moz-transform: rotate(-60deg) skewY(30deg);
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
overflow: hidden;
visibility: hidden;
}
.grid li:nth-child(2n) {
margin: 0 1%;
}
.grid li:nth-child(10n+6),
.grid li:nth-child(10n+7),
.grid li:nth-child(10n+8),
.grid li:nth-child(10n+9),
.grid li:nth-child(10n+10) {
margin-top: -4.5%;
margin-bottom: -4.5%;
-o-transform: translateX(48%) rotate(-60deg) skewY(30deg);
-moz-transform: translateX(48%) rotate(-60deg) skewY(30deg);
-webkit-transform: translateX(48%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(48%) rotate(-60deg) skewY(30deg);
transform: translateX(48%) rotate(-60deg) skewY(30deg);
}
.grid li .hexagon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-transform: skewY(-30deg) rotate(60deg);
-moz-transform: skewY(-30deg) rotate(60deg);
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
overflow: hidden;
/*background images*/
}
.grid li .hexagon.img1 {
background: url("https://c2.staticflickr.com/6/5560/15235542331_fbe56a772e_b.jpg");
background-size: cover;
background-position: center;
display: inline-block;
cursor: pointer;
}
.grid li .hexagon.img1 .text {
opacity: 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 20px;
}
.grid li .hexagon.img1:hover .text {
text-align: center;
margin-top: 51%;
opacity: 1;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.grid li .hexagon.img2 {
background: url("https://c2.staticflickr.com/8/7490/16150657349_cf9be4ce7e_b.jpg");
background-size: cover;
background-position: center;
display: inline-block;
cursor: pointer;
}
.grid li .hexagon.img2 .text {
opacity: 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 20px;
}
.grid li .hexagon.img2:hover .text {
text-align: center;
margin-top: 51%;
opacity: 1;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.grid li .hexagon.img3 {
background: url("https://c2.staticflickr.com/6/5205/5262879347_26a831f439_b.jpg");
background-size: cover;
background-position: center;
display: inline-block;
cursor: pointer;
}
.grid li .hexagon.img3 .text {
opacity: 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 20px;
}
.grid li .hexagon.img3:hover .text {
text-align: center;
margin-top: 51%;
opacity: 1;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.grid li * {
visibility: visible;
}
.grid li p {
transform: translateY(100%);
text-align: center;
color: #fff;
}
.clear:after {
content: "";
display: block;
clear: both;
}
#media only screen and (max-width: 768px) {
.grid li {
display: inline-block;
width: 49%;
padding: 0;
height: 35%;
padding-bottom: 0%;
-o-transform: none;
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
overflow: visible;
visibility: visible;
padding-bottom: 2%;
}
.grid li:nth-child(2n+1) {
margin-right: 2%;
}
.grid li:nth-child(2n) {
margin: 0 0%;
}
.grid li .hexagon {
position: relative;
top: none;
left: none;
width: 100%;
height: 200px;
-o-transform: none;
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.grid li:nth-child(10n+6),
.grid li:nth-child(10n+7),
.grid li:nth-child(10n+8),
.grid li:nth-child(10n+9),
.grid li:nth-child(10n+10) {
margin-top: 0%;
margin-bottom: 0%;
-o-transform: none;
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
#media only screen and (max-width: 400px) {
.grid li {
display: inline-block;
width: 100%;
height: 35%;
padding-bottom: 10px;
}
.grid li:nth-child(2n+1) {
margin-right: 0%;
}
}
/*hover effects*/
/*!
* Hover.css (http://ianlunn.github.io/Hover/)
* Version: 2.2.0
* Author: Ian Lunn #IanLunn
* Author URL: http://ianlunn.co.uk/
* Github: https://github.com/IanLunn/Hover
* Hover.css Copyright Ian Lunn 2017. Generated with LESS.
*/
/* Sweep To Right */
.hvr-sweep-to-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2693ff;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover,
.hvr-sweep-to-right:focus,
.hvr-sweep-to-right:active {
color: white;
}
.hvr-sweep-to-right:hover:before,
.hvr-sweep-to-right:focus:before,
.hvr-sweep-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* Sweep To Bottom */
.hvr-sweep-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2693ff;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover,
.hvr-sweep-to-bottom:focus,
.hvr-sweep-to-bottom:active {
color: white;
}
.hvr-sweep-to-bottom:hover:before,
.hvr-sweep-to-bottom:focus:before,
.hvr-sweep-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/* Radial Out */
.hvr-radial-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-radial-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2693ff;
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-radial-out:hover,
.hvr-radial-out:focus,
.hvr-radial-out:active {
color: white;
}
.hvr-radial-out:hover:before,
.hvr-radial-out:focus:before,
.hvr-radial-out:active:before {
-webkit-transform: scale(2);
transform: scale(2);
}
/* Shutter Out Horizontal */
.hvr-shutter-out-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-shutter-out-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #2693ff;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover,
.hvr-shutter-out-horizontal:focus,
.hvr-shutter-out-horizontal:active {
color: white;
}
.hvr-shutter-out-horizontal:hover:before,
.hvr-shutter-out-horizontal:focus:before,
.hvr-shutter-out-horizontal:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<!doctype html>
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/hover.css/2.1.1/css/hover.css">-->
</head>
<body>
<ul class="grid">
<li>
<div class="hexagon img1 hvr-sweep-to-right"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img2 hvr-sweep-to-bottom"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img3 hvr-radial-out"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img1 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img2 hvr-sweep-to-right"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img3 hvr-sweep-to-bottom"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img1 hvr-radial-out"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img2 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img3 hvr-sweep-to-right"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img1 hvr-sweep-to-bottom"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img2 hvr-radial-out"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img3 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img1 hvr-sweep-to-right"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img2 hvr-sweep-to-bottom"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img3 hvr-radial-out"><div class="text">Hello World</div></div>
</li>
</ul>
</body>
</html>
I think hover does not works on mobile devices. Because :hover requires a pointer to activate.
There are more details here
You should use :active pseudo class for mobile insted of :hover
Also it's good to put cursor: pointer;
Keep in mind also this specific behaviour for iphone - How to make my 'click' function work with iOS
Ok I found the issue. Its to do with the z-index of the background effect. For example for hvr-shutter-out-horizontal, in the css class .hvr-shutter-out-horizontal:before { } change the z-index to something like z-index: 5 instead of -1. Then in .grid li .hexagon.img1 .text change it to a higher z index like z-index:10 so the text is visible in front. Working solution here. Using this fix means you should be able to use any of the css hover effects in this library https://github.com/IanLunn/Hover
/* grid of hexagons */
.grid {
width: 90%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
}
.grid li {
list-style-type: none;
position: relative;
float: left;
width: 18%;
padding-bottom: 20.78461%;
-o-transform: rotate(-60deg) skewY(30deg);
-moz-transform: rotate(-60deg) skewY(30deg);
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
overflow: hidden;
visibility: hidden;
}
.grid li:nth-child(2n) {
margin: 0 1%;
}
.grid li:nth-child(10n+6),
.grid li:nth-child(10n+7),
.grid li:nth-child(10n+8),
.grid li:nth-child(10n+9),
.grid li:nth-child(10n+10) {
margin-top: -4.5%;
margin-bottom: -4.5%;
-o-transform: translateX(48%) rotate(-60deg) skewY(30deg);
-moz-transform: translateX(48%) rotate(-60deg) skewY(30deg);
-webkit-transform: translateX(48%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(48%) rotate(-60deg) skewY(30deg);
transform: translateX(48%) rotate(-60deg) skewY(30deg);
}
.grid li .hexagon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-transform: skewY(-30deg) rotate(60deg);
-moz-transform: skewY(-30deg) rotate(60deg);
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
overflow: hidden;
/*background images*/
}
.grid li .hexagon.img1 {
background: url("https://c2.staticflickr.com/6/5560/15235542331_fbe56a772e_b.jpg");
background-size: cover;
background-position: center;
display: inline-block;
cursor: pointer;
}
.grid li .hexagon.img1 .text {
opacity: 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 20px;
z-index: 10;
position: relative;
}
.grid li .hexagon.img1:hover .text {
text-align: center;
margin-top: 51%;
opacity: 1;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.grid li .hexagon.img2 {
background: url("https://c2.staticflickr.com/8/7490/16150657349_cf9be4ce7e_b.jpg");
background-size: cover;
background-position: center;
display: inline-block;
cursor: pointer;
}
.grid li .hexagon.img2 .text {
opacity: 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 20px;
z-index: 10;
position: relative;
}
.grid li .hexagon.img2:hover .text {
text-align: center;
margin-top: 51%;
opacity: 1;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.grid li .hexagon.img3 {
background: url("https://c2.staticflickr.com/6/5205/5262879347_26a831f439_b.jpg");
background-size: cover;
background-position: center;
display: inline-block;
cursor: pointer;
}
.grid li .hexagon.img3 .text {
opacity: 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 20px;
z-index: 10;
position: relative;
}
.grid li .hexagon.img3:hover .text {
text-align: center;
margin-top: 51%;
opacity: 1;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.grid li * {
visibility: visible;
}
.grid li p {
transform: translateY(100%);
text-align: center;
color: #fff;
}
.clear:after {
content: "";
display: block;
clear: both;
}
#media only screen and (max-width: 768px) {
.grid li {
display: inline-block;
width: 49%;
padding: 0;
height: 35%;
padding-bottom: 0%;
-o-transform: none;
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
overflow: visible;
visibility: visible;
padding-bottom: 2%;
}
.grid li:nth-child(2n+1) {
margin-right: 2%;
}
.grid li:nth-child(2n) {
margin: 0 0%;
}
.grid li .hexagon {
position: relative;
top: none;
left: none;
width: 100%;
height: 200px;
-o-transform: none;
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.grid li:nth-child(10n+6),
.grid li:nth-child(10n+7),
.grid li:nth-child(10n+8),
.grid li:nth-child(10n+9),
.grid li:nth-child(10n+10) {
margin-top: 0%;
margin-bottom: 0%;
-o-transform: none;
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
#media only screen and (max-width: 400px) {
.grid li {
display: inline-block;
width: 100%;
height: 35%;
padding-bottom: 10px;
}
.grid li:nth-child(2n+1) {
margin-right: 0%;
}
}
/*hover effects*/
/*!
* Hover.css (http://ianlunn.github.io/Hover/)
* Version: 2.2.0
* Author: Ian Lunn #IanLunn
* Author URL: http://ianlunn.co.uk/
* Github: https://github.com/IanLunn/Hover
* Hover.css Copyright Ian Lunn 2017. Generated with LESS.
*/
/* Sweep To Right */
.hvr-sweep-to-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
content: "";
position: absolute;
z-index: 5;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2693ff;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover,
.hvr-sweep-to-right:focus,
.hvr-sweep-to-right:active {
color: white;
}
.hvr-sweep-to-right:hover:before,
.hvr-sweep-to-right:focus:before,
.hvr-sweep-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* Sweep To Bottom */
.hvr-sweep-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
content: "";
position: absolute;
z-index: 5;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2693ff;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover,
.hvr-sweep-to-bottom:focus,
.hvr-sweep-to-bottom:active {
color: white;
}
.hvr-sweep-to-bottom:hover:before,
.hvr-sweep-to-bottom:focus:before,
.hvr-sweep-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/* Radial Out */
.hvr-radial-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-radial-out:before {
content: "";
position: absolute;
z-index: 5;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2693ff;
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-radial-out:hover,
.hvr-radial-out:focus,
.hvr-radial-out:active {
color: white;
}
.hvr-radial-out:hover:before,
.hvr-radial-out:focus:before,
.hvr-radial-out:active:before {
-webkit-transform: scale(2);
transform: scale(2);
}
/* Shutter Out Horizontal */
.hvr-shutter-out-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-shutter-out-horizontal:before {
content: "";
position: absolute;
z-index: 5;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #2693ff;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover,
.hvr-shutter-out-horizontal:focus,
.hvr-shutter-out-horizontal:active {
color: white;
}
.hvr-shutter-out-horizontal:hover:before,
.hvr-shutter-out-horizontal:focus:before,
.hvr-shutter-out-horizontal:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<!doctype html>
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/hover.css/2.1.1/css/hover.css">-->
</head>
<body>
<ul class="grid">
<li>
<div class="hexagon img1 hvr-sweep-to-right"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img2 hvr-sweep-to-bottom"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img3 hvr-radial-out"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img1 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img2 hvr-sweep-to-right"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img3 hvr-sweep-to-bottom"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img1 hvr-radial-out"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img2 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img3 hvr-sweep-to-right"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img1 hvr-sweep-to-bottom"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img2 hvr-radial-out"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img3 hvr-shutter-out-horizontal"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img1 hvr-sweep-to-right"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img2 hvr-sweep-to-bottom"><div class="text">Hello World</div></div>
</li>
<li>
<div class="hexagon img3 hvr-radial-out"><div class="text">Hello World</div></div>
</li>
</ul>
</body>
</html>
Related
Hi can i know how can use 2 pseudo element for 1 class or 2 class. I tried both ways was still being overridden. Your help and advice much appreciated.
I tried 2 ways. First as below
<div class="custom_class">
<p>Custome Text</p>
</div>
.custom_class::before
{
}
.custom_class::after
{
}
.custom_class::before
{
}
.custom_class:::after
{
}
Second wat as below
<div class="custom_class1 custom_class2">
<p>Custome Text</p>
</div>
.custom_class1::before
{
}
.custom_class1::after
{
}
.custom_class2::before
{
}
.custom_class2:::after
{
}
But both not working. Can please advice on this
-------Edited------------------
This is my html code
<div class="classOne transx transy">
<div class="flex-row">
Custome Text
</div>
</div>
Added my code css code
.classOne {
position: absolute;
left: 50%;
width: 20%;
height: 55px;
border-radius: 0px;
box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
outline: 3px solid gold;
overflow: hidden;
background: #ffbb00;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
margin-left:30.6%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
a.classOneBtn
{
color: white;
font-family: 'Chivo Black', sans-serif;
font-size: 18px;
font-weight: 500;
}
.transy::before
{
height: 100%;
width: 5px;
background: white;
content: "";
position: absolute;
left: 0;
top: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.transy::after
{
height: 100%;
width: 5px;
background: white;
content: "";
position: absolute;
right: 0;
top: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
}
.transx::before
{
height: 5px;
width: 100%;
background: white;
content: "";
position: absolute;
left: 0;
top: 0;
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.transx::after
{
height: 5px;
width: 100%;
background: white;
content: "";
position: absolute;
left: 0px;
bottom: 0;
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.transx:hover::before, .transx:hover::after
{
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.transy:hover::before, .transy:hover::after
{
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
This was for the animation part whereby when hover will show a line of box This the code which i was performing.
If you would like see output. you need comment the transx
In the same element you can not.
It is not the same item but you can get something similar.
.transx{
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.classOne {
text-align: center;
position: absolute;
left: 50%;
width: 20%;
height: 55px;
border-radius: 0px;
box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
outline: 3px solid gold;
overflow: hidden;
background: #ffbb00;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
margin-left:30.6%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
a.classOneBtn
{
color: white;
font-family: 'Chivo Black', sans-serif;
font-size: 18px;
font-weight: 500;
}
.transy::before
{
height: 100%;
width: 5px;
background: white;
content: "";
position: absolute;
left: 0;
top: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.transy::after
{
height: 100%;
width: 5px;
background: white;
content: "";
position: absolute;
right: 0;
top: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
}
.transx::before
{
height: 5px;
width: 100%;
background: white;
content: "";
position: absolute;
left: 0;
top: 0;
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.transx::after
{
height: 5px;
width: 100%;
background: white;
content: "";
position: absolute;
left: 0px;
bottom: 0;
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.transx:hover::before, .transx:hover::after
{
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.transy:hover::before, .transy:hover::after
{
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
<div class="classOne transy">
<div class="transx"></div>
<div class="flex-row">
Custome Text
</div>
</div>
You can only have one ::before and one ::after pseudo-element per element, but with some CSS magic you can make it look like the pseudo-elements of a child element belongs to its parent:
*::before,
*::after {
display: block;
}
.custom_class1::before {
content: "outer before"
}
.custom_class1::after {
content: "outer after"
}
.custom_class1 p::before {
content: "inner before";
position: absolute;
top: -18px;
}
.custom_class1 p::after {
content: "inner after";
position: absolute;
bottom: -18px;
}
.custom_class1 p {
position: relative;
background-color: lightblue;
}
.custom_class1 {
background-color: pink;
display: inline-block;
}
<div class="custom_class1 custom_class2">
<p>Custome Text</p>
</div>
You can achieve what you want without any pseudo element:
.box {
display:inline-block;
border:1px solid #000;
padding:4px;
background:
linear-gradient(#fff,#fff) left,
linear-gradient(#fff,#fff) bottom,
linear-gradient(#fff,#fff) right,
linear-gradient(#fff,#fff) top;
background-repeat:no-repeat;
background-origin:content-box;
background-size:5px 0%,0% 5px;
background-color:orange;
transition:0.5s;
}
.box:hover {
background-size:5px 100%,100% 5px;
}
.box a {
display:inline-block;
padding:20px 50px;
}
<div class="box">
text
</div>
Anyone know why this wont work correctly? The dropdown should only appear when you hovet on the menu name but it appears if you hover below the item name and the longer the menu list the further beneath it you can hover to make it drop down. For example if you hover below the menu name "skills" the dropdown appears instead of only appearing when you click ON the name or hover over it.
<!DOCTYPE html>
<html>
<head>
<style>
$min-width: 120px;
$secondarycolor: #CCFF00;
$thirdcolor: #000000;
#mixin transform($value) {
-webkit-transform: ($value);
-moz-transform: ($value);
-ms-transform: ($value);
transform: ($value);
}
#mixin transition($value) {
-webkit-transition: ($value);
-moz-transition: ($value);
-ms-transition: ($value);
transition: ($value);
}
*{
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
color: #CCFF00;
background: #374954;
text-align: center;
}
#main {
position: relative;
list-style: none;
background-image: url('https://tc-boxing.com/pic/gradient.png');
background-repeat: repeat-x no-repeat-y;
font-weight: 600;
font-size: 0;
text-transform: uppercase;
display: inline-block;
padding: 0;
margin: 50px auto;
li {
font-size: 0.8rem;
display: inline-block;
position: relative;
padding: 15px 20px;
cursor: pointer;
z-index: 5;
min-width: $min-width;
}
}
li {
margin: 0;
}
.drop {
overflow: hidden;
list-style: none;
position: absolute;
padding: 0;
width: 100%;
left: 0;
top: 48px;
div {
#include transform(translate(0,-100%));
#include transition(all 0.5s 0.1s);
position: relative;
}
li {
display:block;
padding: 0;
width: 100%;
background-image: url('https://tc-boxing.net/pic/gradientdd2.png') !important;
background-repeat: repeat-x no-repeat-y;
}
}
#marker {
height: 6px;
background: $secondarycolor !important;
position: absolute;
bottom: 0;
width: $min-width;
z-index: 2; #include transition(all 0.35s);
}
#for $i from 1 through 4 {
#main li:nth-child(#{$i}) {
&:hover ul div {
#include transform(translate(0,0));
}
&:hover ~ #marker {
#include transform(translate(#{(-1+$i)*$min-width},0));
}
}
}
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
background: #374954;
color: #CCFF00;
text-align: center;
}
#main {
position: relative;
list-style: none;
background-image: url('https://tc-boxing.com/pic/gradient.png');
background-repeat: repeat-x no-repeat-y;
font-weight: 600;
font-size: 0;
text-transform: uppercase;
display: inline-block;
padding: 0;
margin: 50px auto;
}
#main li {
font-size: 0.8rem;
display: inline-block;
position: relative;
padding: 15px 20px;
cursor: pointer;
z-index: 5;
min-width: 120px;
}
li {
margin: 0;
}
.drop {
overflow: hidden;
list-style: none;
position: absolute;
padding: 0;
width: 100%;
left: 0;
top: 48px;
}
.drop div {
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
-webkit-transition: all 0.5s 0.1s;
-moz-transition: all 0.5s 0.1s;
-ms-transition: all 0.5s 0.1s;
transition: all 0.5s 0.1s;
position: relative;
}
.drop li {
display: block;
padding: 0;
width: 100%;
background-image: url('https://tc-boxing.net/pic/gradientdd.png') !important;
background-repeat: repeat-x no-repeat-y;
}
#marker {
height: 4px;
background: #CCFF00 !important;
position: absolute;
bottom: 0;
width: 120px;
z-index: 2;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
-ms-transition: all 0.35s;
transition: all 0.35s;
}
#main li:nth-child(1):hover ul div {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#main li:nth-child(1):hover ~ #marker {
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
transform: translate(0px, 0);
}
#main li:nth-child(2):hover ul div {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#main li:nth-child(2):hover ~ #marker {
-webkit-transform: translate(120px, 0);
-moz-transform: translate(120px, 0);
-ms-transform: translate(120px, 0);
transform: translate(120px, 0);
}
#main li:nth-child(3):hover ul div {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#main li:nth-child(3):hover ~ #marker {
-webkit-transform: translate(240px, 0);
-moz-transform: translate(240px, 0);
-ms-transform: translate(240px, 0);
transform: translate(240px, 0);
}
#main li:nth-child(4):hover ul div {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#main li:nth-child(4):hover ~ #marker {
-webkit-transform: translate(360px, 0);
-moz-transform: translate(360px, 0);
-ms-transform: translate(360px, 0);
transform: translate(360px, 0);
}
</style>
</head>
<body>
<!-- not responsive yet -->
<nav>
<ul id="main">
<li>Home</li>
<li>About</li>
<li>Skills
<ul class="drop">
<div>
<li>scss</li>
<li>jquery</li>
<li>html</li>
</div>
</ul>
</li>
<li>Contact</li>
<div id="marker"></div>
</ul>
</nav>
</body>
</html>
https://codepen.io/dghez/pen/Kwoper
Try adding::
#main li {
visibility: hidden;
}
#main li:hover ul {
visibility: visible;
}
I found this css code on internet it creates underline animation effect, i need to reverse it to be right-to-left instead of left to right.
.nav-item a {
display: inline-block !important;
&:after {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all .3s cubic-bezier(.19,1,.22,1);
-moz-transition: all .3s cubic-bezier(.19,1,.22,1);
transition: all .3s cubic-bezier(.19,1,.22,1);
-webkit-transform: scaleX(0) translate3d(0,0,0);
-moz-transform: scaleX(0) translate3d(0,0,0);
transform: scaleX(0) translate3d(0,0,0);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
display: block;
height: 4px;
width: 100%;
background-color: #6cb2eb;
-o-transition: all .3s cubic-bezier(.19,1,.22,1);
opacity: 1;
content: "";
}
&:hover {
&:after {
-webkit-transform: scaleX(1) translate3d(0,0,0);
-moz-transform: scaleX(1) translate3d(0,0,0);
transform: scaleX(1) translate3d(0,0,0);
}
}
}
i tried to change &:after from scaleX(1) to scaleX(-1) it works as i needed but far from the text.
Just change transform-origin from 0 0 to 100% 100%:
.nav-item a {
display: inline-block !important;
}
.nav-item a:after {
border-radius: 10px;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
transform: scaleX(0) translate3d(0, 0, 0);
transform-origin: 100% 100%;
display: block;
height: 4px;
width: 100%;
background-color: #6cb2eb;
opacity: 1;
content: "";
}
.nav-item a:hover:after {
-webkit-transform: scaleX(1) translate3d(0, 0, 0);
-moz-transform: scaleX(1) translate3d(0, 0, 0);
transform: scaleX(1) translate3d(0, 0, 0);
}
<div class="nav-item">
<a>test</a>
</div>
Note: I converted scss to css and I removed useless vendor-specific properties
You have to float: right .nav-item a::after. It will work
.nav-item > a {
display: inline-block;
border-radius: 10px;
padding: 10px 20px;
transition: all 0.3s cubic-bezier(.19,1,.22,1);
text-decoration: none;
}
.nav-item > a::after {
content: '';
display: block;
height: 4px;
width: 0%;
background-color: #6cb2eb;
float: right;
transition: all 0.3s cubic-bezier(.19,1,.22,1);
}
.nav-item > a:hover::after {
width: 100%;
}
Check this fiddle - https://jsfiddle.net/jfgq2kva/6/
I have found a sidebar and have insert a link. Here you can see a sample.
But the link doesn't work because the sidebar overlays the link. What can I do to resolve this problem?
z-index is not working for me.
a {
color: #fff;
text-decoration: none;
}
.me {
width: 400px;
margin: 90px auto;
}
.me p,
.me h1 {
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
}
.me p {
font-weight: 200;
}
.me span {
font-weight: bold;
}
.social {
position: fixed;
top: 20px;
}
.social ul {
padding: 0px;
-webkit-transform: translate(-270px, 0);
-moz-transform: translate(-270px, 0);
-ms-transform: translate(-270px, 0);
-o-transform: translate(-270px, 0);
transform: translate(-270px, 0);
}
.social ul li {
display: block;
margin: 5px;
background: rgba(0, 0, 0, 0.36);
width: 300px;
text-align: right;
padding: 10px;
-webkit-border-radius: 0 30px 30px 0;
-moz-border-radius: 0 30px 30px 0;
border-radius: 0 30px 30px 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.social ul li:hover {
-webkit-transform: translate(110px, 0);
-moz-transform: translate(110px, 0);
-ms-transform: translate(110px, 0);
-o-transform: translate(110px, 0);
transform: translate(110px, 0);
background: rgba(255, 255, 255, 0.4);
}
.social ul li:hover a {
color: #000;
}
.social ul li:hover i {
color: #fff;
background: rgba(0, 0, 0, 0.36);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.social ul li i {
margin-left: 10px;
color: #000;
background: #fff;
padding: 10px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 20px;
background: #ffffff;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
body {
background: #25343F;
color: #fff;
font-family: 'Raleway', sans-serif;
}
<link href='http://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div>
<br />
<br />
<br />a link who don't work becauce overlay
</div>
<nav class="social">
<ul>
<li>Twitter <i class="fa fa-twitter"></i>
</li>
<li>Facebook <i class="fa fa-facebook"></i>
</li>
<li>Dribbble <i class="fa fa-dribbble"></i>
</li>
<li>Behance <i class="fa fa-behance"></i>
</li>
</ul>
</nav>
<div class="me">
<p>Created by:
<p>
<h1>Gian Di Serafino</h1>
<p>for <span>Informartion architecture</span>
</p>
</div>
You need to give the div a position. In order not to mess with z-indexes, put the div after the sidebar.
div.problematic_div {
position:relative;
}
But I recommend you to check how you are positioning your elements.
div.problematic_div {
position: relative;
}
a {
color: #fff;
text-decoration: none;
}
.me {
width: 400px;
margin: 90px auto;
}
.me p,
.me h1 {
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
}
.me p {
font-weight: 200;
}
.me span {
font-weight: bold;
}
.social {
position: fixed;
top: 20px;
}
.social ul {
padding: 0px;
-webkit-transform: translate(-270px, 0);
-moz-transform: translate(-270px, 0);
-ms-transform: translate(-270px, 0);
-o-transform: translate(-270px, 0);
transform: translate(-270px, 0);
}
.social ul li {
display: block;
margin: 5px;
background: rgba(0, 0, 0, 0.36);
width: 300px;
text-align: right;
padding: 10px;
-webkit-border-radius: 0 30px 30px 0;
-moz-border-radius: 0 30px 30px 0;
border-radius: 0 30px 30px 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.social ul li:hover {
-webkit-transform: translate(110px, 0);
-moz-transform: translate(110px, 0);
-ms-transform: translate(110px, 0);
-o-transform: translate(110px, 0);
transform: translate(110px, 0);
background: rgba(255, 255, 255, 0.4);
}
.social ul li:hover a {
color: #000;
}
.social ul li:hover i {
color: #fff;
background: rgba(0, 0, 0, 0.36);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.social ul li i {
margin-left: 10px;
color: #000;
background: #fff;
padding: 10px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 20px;
background: #ffffff;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
body {
background: #25343F;
color: #fff;
font-family: 'Raleway', sans-serif;
}
<link href='http://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<nav class="social">
<ul>
<li>Twitter <i class="fa fa-twitter"></i>
</li>
<li>Facebook <i class="fa fa-facebook"></i>
</li>
<li>Dribbble <i class="fa fa-dribbble"></i>
</li>
<li>Behance <i class="fa fa-behance"></i>
</li>
</ul>
</nav>
<div class="problematic_div">
<br />
<br />
<br />a link who don't work becauce overlay
</div>
<div class="me">
<p>Created by:
<p>
<h1>Gian Di Serafino</h1>
<p>for <span>Informartion architecture</span>
</p>
</div>
I've got some boxes (think oblong chocolate boxes) that I want to unfold and show the contents of. The content will be another div with text, video etc., but I'm currently concerned with the unfolding animation itself.
I've got it sort of working, but the top two divs leave a gap between them while animating. Is there some way I can link them together while 'unfolding' them?
Demo: JSFiddle
HTML:
<section>
<div class="block3d">
<div class="front">
<h4>CHOCOLATE</h4>
</div>
<div class="top"><h4></h4></div>
<div class="back">
<ul>
<li>Chocolate</li>
<li>Milk</li>
<li>Nuts</li>
<li>Oranges</li>
</ul>
<a class="infolink" href="#">Open me</a>
</div>
<div class="bottom"><h4></h4></div>
</div>
</section>
Javascript:
$(document).ready(function(){
$(".block3d .infolink").click(function(e){
openBlock(this, e);
});
});
function openBlock(element, event)
{
event.preventDefault();
$(element).closest('section').addClass('open');
$.scrollTo($(element).closest('section'), {duration: 1000});
}
CSS:
section
{
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 100px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 100px;
-ms-perspective: 800px;
-ms-perspective-origin: 50% 100px;
perspective: 800px;
perspective-origin: 50% 100px;
width: 960px;
height: 240px;
margin: 10px auto;
transition-property: height;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 100ms;
}
section.open
{
height: 960px;
}
.block3d
{
position: relative;
width: 960px;
height: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
margin: 0 auto;
-webkit-transform-origin: 0 100px;
-moz-transform-origin: 0 100px;
-ms-transform-origin: 0 100px;
transform-origin: 0 100px;
transition-property: transform, display;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 100ms;
}
.block3d:hover, .open .block3d
{
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
/* Positioning of the different faces of the block */
.block3d div
{
position: absolute;
width: 960px;
height: 200px;
background-color: rgba(0,0,0,0.4);
color: #FFFFFF;
}
.block3d .back
{
-webkit-transform: translateZ(-100px) rotateX(180deg);
-moz-transform: translateZ(-100px) rotateX(180deg);
-ms-transform: translateZ(-100px) rotateX(180deg);
transform: translateZ(-100px) rotateX(180deg);
background-color: #323232;
}
.block3d .top
{
-webkit-transform: rotateX(-270deg) translateY(-100px);
-webkit-transform-origin: top center;
-moz-transform: rotateX(-270deg) translateY(-100px);
-moz-transform-origin: top center;
-ms-transform: rotateX(-270deg) translateY(-100px);
-ms-transform-origin: top center;
transform: rotateX(-270deg) translateY(-100px);
transform-origin: top center;
}
.block3d .bottom
{
-webkit-transform: rotateX(-90deg) translateZ(100px);
-moz-transform: rotateX(-90deg) translateZ(100px);
-ms-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}
.block3d .front
{
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
transform: translateZ(100px);
}
/* Div content styling */
.block3d h4, .block3d ul
{
margin-left: 480px;
background-color: #323232;
margin-top: 0;
}
.block3d h4
{
font-size: 20px;
text-align: center;
padding-top: 90px;
height: 110px;
width: 300px;
}
.block3d ul
{
padding: 40px;
height: auto;
width: 220px;
}
.block3d .infolink
{
display: block;
margin-left: 455px;
height: 30px;
width: 100px;
color: #ffffff;
text-align: center;
padding: 2px;
border: 1px dashed #FFFFFF;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
border-bottom: 0;
}
/* Open animations for the different parts */
.open .block3d .top
{
-webkit-transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
-moz-transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
transition-property: transform;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 0s;
}
#-webkit-keyframes openback
{
0% {-webkit-transform: translateZ(-100px) rotateX(180deg) translateY(0)}
50% {-webkit-transform: rotateX(270deg) translateZ(300px)}
100% {-webkit-transform: rotateX(360deg) translateY(400px) translateZ(100px)}
}
#-moz-keyframes openback
{
0% {-moz-transform: translateZ(-100px) rotateX(180deg) translateY(0)}
50% {-moz-transform: rotateX(270deg) translateZ(300px)}
100% {-moz-transform: rotateX(360deg) translateY(400px) translateZ(100px)}
}
#keyframes openback
{
0% {transform: translateZ(-100px) rotateX(180deg) translateY(0)}
50% {transform: rotateX(270deg) translateZ(300px)}
100% {transform: rotateX(360deg) translateY(400px) translateZ(100px)}
}
.open .block3d .back
{
-webkit-animation: openback 1s 1 linear forwards;
-moz-animation: openback 1s 1 linear forwards;
animation: openback 1s 1 linear forwards;
}
.open .block3d .bottom
{
-webkit-transform: rotateX(-360deg) translateZ(100px) translateY(200px);
-moz-transform: rotateX(-360deg) translateZ(100px) translateY(200px);
transform: rotateX(-360deg) translateZ(100px) translateY(200px);
transition-property: transform;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 0.0s;
}
/* Move the block into place */
.open .block3d
{
-webkit-transform: translateZ(100px) rotateX(180deg) translateY(-440px);
-moz-transform: translateZ(100px) rotateX(180deg) translateY(-440px);
transform: translateZ(100px) rotateX(180deg) translateY(-440px);
transition-property: transform;
transition-timing-function: linear;
transition-duration: 1s;
transition-delay: 0s;
}
If you are looking for cool paper fold/unfolding animations take a look at this tutorial and here is the code on git. I'd look specifically the pfold.jquery.js file in order to achieve this sort of animation.
Although it might take a little tweaking of the js/css to get it to look how you want since this is for unfolding paper instead of unwrapping a box, but the basic animation is there.
You can add a 1px pseudo element to the top and bottom of the intersecting elements. You may want to add this during the animation and then remove it after so you don't see extra space when it has stopped.
Here is a JSFiddle
Relevant CSS
.back {
position: absolute;
top: -1px;
margin-top: 1px;
margin-bottom: 1px;
}
.block3d h4
{
display: block;
position: absolute;
top: -1px;
font-size: 20px;
text-align: center;
padding-top: 90px;
height: 110px;
width: 300px;
margin-top: 1px;
margin-bottom: 1px;
}
.block3d h4:before,
.block3d h4:after,
.back:before,
.back:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #323232;
}
.block3d h4:before,
.back:before {
top: -1px;
}
.block3d h4:after,
.back:after {
bottom: -1px;
}