I have a bunch of elements that have a 50% border-radius to make a circle and a rotated element into them cropped by the border-radius and the 'overflow: hidden' property.
Up here it's all right.
The problem I have is when I make hover on any of that elements that ignores the crop and shows the other pseudo-elements ignoring the overflow property. I've tried on Firefox and is OK, but in Chrome I can't do anything to solve it.
<html>
<head>
<title></title>
<style>
.products {
margin: 0 auto;
max-width: 1280px;
text-align: center;
}
.post__product {
width: 260px;
height: 260px;
margin: 0 20px 5em;
overflow: hidden;
-webkit-border-radius: 50%;
border-radius: 50%;
position: relative;
display: inline-block;
-webkit-transition: all 250ms linear;
-moz-transition: all 250ms linear;
-o-transition: all 250ms linear;
-ms-transition: all 250ms linear;
transition: all 250ms linear;
}
.post__product:hover {
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
.post__product .rotated-element {
z-index: 0;
width: 300px;
right: -90px;
height: 200px;
bottom: -50px;
overflow: hidden;
position: absolute;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
background-color: rgba(33,38,41,0.5);
}
.post__product .title {
right: 0;
bottom: 0;
z-index: 1;
position: absolute;
}
.post__product .title h2 {
font-weight: 300;
}
</style>
</head>
<body>
<section class="products">
<a href="#" class="post post__product">
<article>
<img src="http://www.dinamiclifestyle.com/marmol-verde.jpg" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://www.dinamiclifestyle.com/marmol-verde.jpg" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://www.dinamiclifestyle.com/marmol-verde.jpg" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://www.dinamiclifestyle.com/marmol-verde.jpg" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://www.dinamiclifestyle.com/marmol-verde.jpg" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://www.dinamiclifestyle.com/marmol-verde.jpg" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
</section>
<!-- .products -->
</body>
</html>I've made a Pen of this: http://codepen.io/anon/pen/pJggxP
Thank you in advance and sorry for my english if I have made any mistake.
