I want to disable transform in my child div. Here is fiddle. Is it possible to disable scale for class .image-text ?
.photo:hover{
transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
-ms-transform: scale(1.4);
}
.photo:hover >*{
transform: none;
}
make a new child element and call your image on it.
here you can see http://jsfiddle.net/rajjuneja49/s3hWj/879/
May be you were looking for this....
You can see these example.
.element{
width: 400px;
height: 550px;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
.main-photo-area {
position:relative;
display: block;
overflow: hidden;
}
.main-photo-area img.photo{
transition: all 0.3s ease;
width: 100%;
}
.main-photo-area:hover img.photo{
transform: scale(1.4);
}
.image-text {
background: rgba(34, 90, 159, 0.6);
bottom: 0;
color: white;
font-size: 1em;
left: 0;
opacity: 0;
overflow: hidden;
padding: 3em 3em 4.25em 3em;
position: absolute;
text-align: center;
top: 0;
right: 0;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.image-text:hover {
opacity: 1;
}
<div class="element">
<div class="main-photo-area">
<img class="photo" src="http://heavytable.com/wp-content/uploads/2012/11/wine-glasses-650-325.jpg"/>
<a class="over" href="/szablon/?id=single">
<div class="image-text">
<h2>Titel</h2>
<p>Desc</p>
<span class="icon">Look</span>
</div>
</a>
</div>
</div>
Related
I'm struggling with centering the modal together with fade in and scale up:
$('#md-trigger').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
$('#md-close').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
.md-modal {
width: 100%;
max-width: 550px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
z-index: 9999;
visibility: hidden;
padding: 25px;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
background-color: #fff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
outline: 0;
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 9998;
opacity: 0;
background: rgba(40,43,49,.8);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
.md-content {
color: #333;
}
.md-effect-1 {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show.md-effect-1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="md-trigger">Show</button>
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Modal Dialog</h3>
<p>This is a modal window. You can do the following things with it:</p>
<button class="md-close" id="md-close">Close me!</button>
</div>
</div>
<div class="md-overlay"></div>
The absolute positioning approach with transform:translate(-50%,-50%); isn't working for me. It has to be responsive so I can't use the margin-left approach. Do you have an idea why it is simply not displayed in the middle?
Please try this,
Add this style to md-modal-wrapper class. added a md-modal-wrapper div to cover md-modal class
.md-modal-wrapper{
width:100vw;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
Remove this style
.md-modal {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
$('#md-trigger').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
$('#md-close').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
.md-modal {
width:100%;
max-width: 550px;
z-index: 9999;
visibility: hidden;
padding: 25px;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
background-color: #fff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
outline: 0;
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 9998;
opacity: 0;
background: rgba(40,43,49,.8);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
.md-content {
color: #333;
}
.md-effect-1 {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show.md-effect-1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.md-modal-wrapper{
width:100vw;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
body{
margin:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button id="md-trigger">Show</button>
<div class="md-modal-wrapper">
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Modal Dialog</h3>
<p>This is a modal window. You can do the following things with it:</p>
<button class="md-close" id="md-close">Close me!</button>
</div>
</div>
<div class="md-overlay"></div>
</div>
</body>
scale(1) was overriding the other transform property, translate(-50%,-50%).
It can be easily fixed by combining them both: transform: translate(-50%,-50%) scale(1).
$('#md-trigger').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
$('#md-close').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
.md-modal {
width: 100%;
max-width: 550px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
z-index: 9999;
visibility: hidden;
padding: 25px;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
background-color: #fff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
outline: 0;
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 9998;
opacity: 0;
background: rgba(40,43,49,.8);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
.md-content {
color: #333;
}
.md-effect-1 {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show.md-effect-1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: translate(-50%,-50%) scale(1);
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="md-trigger">Show</button>
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Modal Dialog</h3>
<p>This is a modal window. You can do the following things with it:</p>
<button class="md-close" id="md-close">Close me!</button>
</div>
</div>
<div class="md-overlay"></div>
How about using flex?
Remove position: absolute; and transform: translate(-50%,-50%); from md-modal
and cover the modal with flex div
.md-container {
display:flex;
justify-content:center;
align-items:center
}
<div class="md-container">
<div class="md-modal">
~~
</div>
</div>
I don't know how to use snippet so I'm attaching a codePen link 😂
https://codepen.io/seongmin0801/pen/MWyrYvm
Make transform: translate(-50%,-50%) !important;. There is .md-show.md-effect-1 { transform: scale(1); } that overrides it that's why you should use important
I want to rotate my element repeatedly, without back flip. When I call my function first time it will rotateX('180deg'), and the second will be rotateX('360deg') but the problem when I call third time it will be backflip, so any idea to make this flip keeping forward without back flip?
function myFunction() {
if (document.getElementById("front").style.transform == "" || document.getElementById("front").style.transform == "rotateX(0deg)") {
document.getElementById("front").style.transform = "rotateX(180deg)";
document.getElementById("back").style.transform = "rotateX(0deg)";
} else if (document.getElementById("front").style.transform == "rotateX(180deg)") {
document.getElementById("front").style.transform = "rotateX(360deg)";
document.getElementById("back").style.transform = "rotateX(180deg)";
} else {
document.getElementById("front").style.transform = "";
document.getElementById("back").style.transform = "rotateX(-180deg)";
}
}
.flipcard {
position: relative;
width: 220px;
height: 160px;
perspective: 500px;
}
.flipcard.h .back {
transform: rotateX(-180deg);
}
.flipcard .front,
.flipcard .back {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all 0.5s ease-in;
color: white;
background-color: #000;
padding: 10px;
backface-visibility: hidden;
}
<div class="flipcard h">
<div class="front" id="front">
This is the front side
</div>
<div class="back" id="back">
This is the back side
</div>
</div>
<button onclick="myFunction()">Flip The Image</button>
Simplify DOM, simplify JS and optimize CSS.
This is the best way to make a spinning card:
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
body { font-family: sans-serif; }
.card {
position: relative;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card.is-flipped {
transform: rotateX(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateX(180deg);
}
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
You can do something like this:
$('#btnClick').click(function() {
$('.flip-container').toggleClass("flipped");
});
.flip-container.flipped .flipper {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
position: relative;
}
.flip-container,
.front,
.back {
width: 200px;
height: 200px;
}
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 500;
cursor: pointer;
top: 0;
width: 200px;
height: 200px;
}
.flip-container .back {
transform: rotateX(-180deg);
background-color: #000;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
width: 200px;
height: 200px;
display: block;
}
.flip-container .front,
.flip-container .back {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all 0.6s ease-in;
color: white;
background-color: #000;
padding: 10px;
backface-visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front">
<p>This is the front side </p>
</div>
<div class="back">
<p> This is the back side </p>
</div>
</div>
</div>
<button id="btnClick">Flip The Image</button>
This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 3 years ago.
I have a jsfiddle here and animation named fromBottom is not working.
http://jsfiddle.net/8g5r2qcw/1/
html
<header class="header">
<div class="header__logo-box">
<img src="https://dtgxwmigmg3gc.cloudfront.net/imagery/assets/derivations/icon/256/256/true/eyJpZCI6ImE4OWEzMGU2YTg5NTViYjcxZWY1OTJiNDlkYjZjMTRhLmpwZyIsInN0b3JhZ2UiOiJwdWJsaWNfc3RvcmUifQ?signature=8735e0713b1bd34828e75056d2c51efc7ffc62c0167dcb80e7d66fe8550b9bc6" alt="Logo" class="header__logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Outdoors</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
Discover our tours
</div>
</header>
relevant css
/* this animation not working */
#keyframes fromBottom
{
0%
{
opacity: 0;
transform: translateY(100px);
}
100%
{
opacity: 1;
transform: translateY(0);
}
}
.btn--animated
{
animation: fromBottom .5s ease-out;
}
I expect the button to move from bottom to its original position when page is loaded.
Try adding display: inline-block; to your .btn--animated and it'll work.
.header
{
background-image: url(https://images2.minutemediacdn.com/image/upload/c_crop,h_2450,w_4368,x_0,y_165/f_auto,q_auto,w_1100/v1562080363/shape/mentalfloss/29942-gettyimages-155302141.jpg);
background-blend-mode: multiply;
height: 80vh;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 70%);
position: relative;
}
.header::after
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom right, #34c9eb, #0c4f5e);
opacity: 0.9;
z-index: -1;
}
.header__logo-box
{
position: absolute;
top: 5px;
left: 0;
width: 80px;
}
.header__logo
{
width: 100%;
height: 100%;
}
.header__text-box
{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.heading-primary--main
{
display: block;
}
.heading-primary--sub
{
display: block;
}
.btn
{
padding: 10px 30px;
text-decoration: none;
color: inherit;
border-radius: 100px;
position: relative;
}
.btn--white
{
background-color: #fff;
}
.btn::after
{
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .4s;
background-color: red;
z-index: -1;
border-radius: 100px;
}
.btn:hover::after
{
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
/* this animation not working */
#keyframes fromBottom
{
0%
{
opacity: 0;
transform: translateY(100px);
}
100%
{
opacity: 1;
transform: translateY(0);
}
}
.btn--animated
{
display: inline-block;
animation: fromBottom .5s ease-out;
}
<header class="header">
<div class="header__logo-box">
<img src="https://dtgxwmigmg3gc.cloudfront.net/imagery/assets/derivations/icon/256/256/true/eyJpZCI6ImE4OWEzMGU2YTg5NTViYjcxZWY1OTJiNDlkYjZjMTRhLmpwZyIsInN0b3JhZ2UiOiJwdWJsaWNfc3RvcmUifQ?signature=8735e0713b1bd34828e75056d2c51efc7ffc62c0167dcb80e7d66fe8550b9bc6" alt="Logo" class="header__logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Outdoors</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
Discover our tours
</div>
</header>
I tried to replicate a border hover effect but I didn't understand why I need to use ::before and ::after to do this Css effect.
This is the page example with the content that I want to replicate with css (I want to replicate the border effect):
http://77.238.26.244:81/confimi/pagina-di-test/
This is the homepage where I tried to replicate the css:
http://77.238.26.244:81/confimi/
In the first row there is the "example" and in the row below there is my attempt
This is the code that I made:
round {
background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
}
.layer {
background-color: rgba(18, 29, 47, 0.96);
background-repeat: repeat;
width: 100%;
height: 100%;
text-align: center;
padding: 200px 20px 200px 20px;
}
.div-diviso {
width: 17%;
margin: 10px;
display: inline-block;
position: relative;
box-sizing: border-box;
}
.div-diviso img {
width: 100%;
position: relative;
}
.div-diviso .overlay {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transform: scale(0.1);
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-o-transform: scale(0.1);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
visibility: hidden;
}
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transform: border scale3d(0, 1, 1);
}
#media (min-width: 768px) and (max-width: 980px) {
.layer {
text-align: center;
}
.div-diviso {
width: 47%;
margin: 10px;
}
}
#media (max-width: 767px) {
.layer {
text-align: center;
}
.div-diviso {
width: 98%;
margin: 5px;
}
}
<div class="background">
<div class="layer">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
</dvi>
</div>
You cannot animate borders from the middle natively in css. They will auto transition from the starting point of the div (or from the opposite end if you want to use a transform: rotate(180deg)). Hence, the usage of the ::before & ::after elements.
Also, transform: border scale3d(0, 1, 1); is invalid as border is not a CSS3 property applicable to transform.
If you do not want to use the pseudo elements, then you can use a late appearance of the border on the overlay. However it won't animate from the middle.
Modify your css as:
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transition: border 0.75s;
}
EDIT
If you do want to use the pseudo selectors, apply the following css:
.div-diviso:hover .overlay:before, .div-diviso:hover .overlay:after {
height: 100%;
top: 0;
width: 100%;
left: 0;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.div-diviso .overlay:before, .div-diviso .overlay:after {
content: '';
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 9;
}
.div-diviso .overlay:after {
content: '';
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 50%;
border-top: 3px solid #20bed0;
border-bottom: 3px solid #20bed0;
}
.div-diviso .overlay:before {
width: 100%;
height: 0;
position: absolute;
top: 50%;
left: 0;
border-left: 3px solid #20bed0;
border-right: 3px solid #20bed0;
}
I'm working on an onhover text translate animation.
I've seen most responses to this question on StackOverflow/Google, and have tried to apply all the fixes, but none of them seem to work.
In firefox, it's just the -moz-transform: translate3d(0,-200px,0);that blurs, but in Chrome the entire time it's blurred.
Here's the fiddle I'm working on.
Option 1
Try this hexagon for smoother text
.hexagon {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
background-image: url(https://0.s3.envato.com/files/53859088/Green-Leaf-Texture_01-1_Preview.jpg);
background-size: auto 346.4102px;
background-position: center;
cursor: pointr;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 43.93px;
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 300.0000px;
height: 173.20508075688775px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -106.0660px;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -106.0660px;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 0.0000px;
left: 0;
width: 300.0000px;
height: 173.2051px;
z-index: 2;
background: inherit;
}
.text {
position: absolute;
top: 220px;
left: 80px;
right: 0;
bottom: 0;
font-size: 2.6em;
color: #000;
z-index: 999;
opacity: 0;
transition: all ease 0.6s;
}
.hexagon:hover .text {
opacity: 1;
top: 70px;
}
.hexagon:hover {
background-color: #fff;
}
<div class="hexagon">
<div class="hexTop"></div>
<div class="hexBottom"></div>
<div class="text">Option1</div>
</div>
Option 2
Use this example its responsive
http://codepen.io/web-tiki/pen/HhCyd
body {
font-family: 'Open Sans', arial, sans-serif;
background: #fff;
}
* {
margin: 0;
padding: 0;
}
#categories {
overflow: hidden;
width: 90%;
margin: 0 auto;
}
.clr:after {
content: "";
display: block;
clear: both;
}
#categories li {
position: relative;
list-style-type: none;
width: 27.85714285714286%;
/* = (100-2.5) / 3.5 */
padding-bottom: 32.16760145166612%;
/* = width /0.866 */
float: left;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(3n+2) {
margin: 0 1%;
}
#categories li:nth-child(6n+4) {
margin-left: 0.5%;
}
#categories li:nth-child(6n+4),
#categories li:nth-child(6n+5),
#categories li:nth-child(6n+6) {
margin-top: -6.9285714285%;
margin-bottom: -6.9285714285%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
#categories li * {
position: absolute;
visibility: visible;
}
#categories li > div {
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
-webkit-backface-visibility: hidden;
}
/* HEX CONTENT */
#categories li img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
}
#categories div h1,
#categories div p {
width: 90%;
padding: 0 5%;
background-color: #008080;
background-color: rgba(0, 0, 0, 0.5);
font-family: 'Raleway', sans-serif;
-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
-ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}
#categories li h1 {
bottom: 110%;
font-style: italic;
font-weight: normal;
font-size: 1em;
padding-top: 100%;
padding-bottom: 100%;
}
#categories li h1:after {
content: '';
display: block;
position: absolute;
bottom: -1px;
left: 45%;
width: 10%;
text-align: center;
z-index: 1;
border-bottom: 2px solid #fff;
}
#categories li p {
padding-top: 50%;
top: 110%;
padding-bottom: 50%;
}
/* HOVER EFFECT */
#categories li div:hover h1 {
bottom: 50%;
padding-bottom: 10%;
}
#categories li div:hover p {
top: 50%;
padding-top: 10%;
}
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,300,200,100,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<ul id="categories" class="clr">
<li class="pusher"></li>
<li>
<div>
<img src="https://0.s3.envato.com/files/53859088/Green-Leaf-Texture_01-1_Preview.jpg" alt="" />
<h1>Option 1</h1>
<p>Some sample text about the article this hexagon leads to</p>
</div>
</li>
<li>
<div>
<img src="https://0.s3.envato.com/files/53859088/Green-Leaf-Texture_01-1_Preview.jpg" alt="" />
<h1>Option 2</h1>
<p>Some sample text about the article this hexagon leads to</p>
</div>
</li>
<li>
<div>
<img src="https://0.s3.envato.com/files/53859088/Green-Leaf-Texture_01-1_Preview.jpg" alt="" />
<h1>Option 3</h1>
<p>Some sample text about the article this hexagon leads to</p>
</div>
</li>
</ul>