Mixing
Overlay slide from top and bottom over img at hover-event
Overlay slide from top and bottom over img at hover-event
I´m struggling with implementing a concept which is used here:
https://codepen.io/web-tiki/pen/HhCyd
body{
font-family: 'Open Sans', arial, sans-serif;
background:rgb(123, 158, 158);
}
*{
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:nth-child(6n+4):last-child, #categories li:nth-child(6n+5):last-child, #categories li:nth-child(6n+6):last-child{
margin-bottom:0%;
}
#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, 128, 128, 0.8);
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:1.5em;
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%;
}
#fork{
position:fixed;
top:0;
left:0;
color:#000;
text-decoration:none;
border:1px solid #000;
padding:.5em .7em;
margin:1%;
transition: color .5s;
overflow:hidden;
}
#fork:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 130%; height: 100%;
background: #000;
z-index: -1;
transform-origin:0 0 ;
transform:translateX(-100%) skewX(-45deg);
transition: transform .5s;
}
#fork:hover {
color: #fff;
}
#fork:hover:before {
transform: translateX(0) skewX(-45deg);
}
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700,300,200,100,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<ul id="categories" class="clr">
<li class="pusher"></li>
<li>
This is a title a bit longer
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li><li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
<li class="pusher"></li>
<li>
This is a title
Some sample text about the article this hexagon leads to
</li>
</ul>
<a id="fork" target="_blank" href="https://github.com/web-tiki/responsive-grid-of-hexagons">Fork on GitHub</a>I don´t want the hexagon shapes or anything I just want the sliding overlay from top and bottom.
I want the overlay to slide onto 500x500 images just like the hexagons are done. I tried a lot but I´m struggling with relative and absolute positioning and end up with a mess of images or no overlay at all.
Thanks in advance for any tips and help!
1 Answer
1
I figured it out myself so here you go: CodePen or:
html,
body {
background-color: #1c1c1c;
height: 100%;
}
.wrapper {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
#portfolioGrid {
width: 40%;
margin: auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.grid-item {
overflow: hidden;
position: relative;
}
.grid-item > a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.overlay-top:after {
content: "";
display: block;
position: absolute;
bottom: -1px;
left: 45%;
width: 10%;
text-align: center;
z-index: 1;
border-bottom: 3px solid #fff;
}
.grid-item img {
width: 100%;
display: block;
}
.overlay-top,
.overlay-bot {
position: absolute;
background-color: #000;
text-align: center;
width: 100%;
overflow: hidden;
height: 50%;
color: #fff;
opacity: 0.9;
}
/*hide*/
.overlay-top {
top: -50%;
}
.overlay-bot {
bottom: -50%;
}
.grid-item h1 {
padding: 50% 0 0 0;
}
.grid-item p {
padding: 0 0 50% 0;
}
/*silding*/
.overlay-top,
.overlay-bot {
transition: top 0.2s ease-out, bottom 0.2s ease-out;
}
.grid-item h1,
.grid-item h2,
.grid-item p {
transition: padding 0.2s ease-out 0.4s;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana,
"sans-serif";
font-size: 15px;
font-weight: 300;
}
/*hover effect*/
.grid-item:hover .overlay-top {
top: 0;
transition-delay: 0.2s;
}
.grid-item:hover .overlay-bot {
bottom: 0;
transition-delay: 0.2s;
}
.grid-item:hover h1,
.grid-item:hover h2 {
padding: 25% 0;
margin: 0;
}
.grid-item:hover p {
padding: 10% 0;
margin: 0;
}
<img src="https://picsum.photos/500" alt="#" />
</a>
<a class="grid-item" href="#"> <!--target="_blank" rel="noopener"-->
<img src="https://picsum.photos/500" alt="#" />
</a>
<a class="grid-item" href="#"> <!--target="_blank" rel="noopener"-->
<img src="https://picsum.photos/500" alt="#" />
</a>
<a class="grid-item" href="#"> <!--target="_blank" rel="noopener"-->
<img src="https://picsum.photos/500" alt="#" />
</a>
<a class="grid-item" href="#"> <!--target="_blank" rel="noopener"-->
<img src="https://picsum.photos/500" alt="#" />
</a>
<a class="grid-item" href="#"> <!--target="_blank" rel="noopener"-->
<img src="https://picsum.photos/500" alt="#" />
</a>
</div>
</div>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Comments
Post a Comment