JSFiddle - React, Tailwind, and code Playground
by Max Lensky
HTML
<menu style="width:800px; margin:20px auto;">
<section>
<a href="">
<div class="media">
</div>
<div class="bicubic">
<p><div class="circle">
<!--img src="http://images.clipartpanda.com/open-book-clip-art-black-and-white-xcgnL59cA.png" alt="" /-->
</div></p>
<div class="name">
<p>Lorem Ipsum</p>
<p>Generic Atlanta</p>
</div>
</div>
</a>
</section>
<section>
<a href="">
<div class="media">
</div>
<div class="bicubic">
<p><div class="circle">
<!--img src="http://images.clipartpanda.com/open-book-clip-art-black-and-white-xcgnL59cA.png" alt="" /-->
</div></p>
<div class="name">
<p>Lorem Ipsum</p>
<p>Generic Atlanta</p>
</div>
</div>
</a>
</section>
<section>
<a href="">
<div class="media">
</div>
<div class="bicubic">
<p><div class="circle">
<!--img src="http://images.clipartpanda.com/open-book-clip-art-black-and-white-xcgnL59cA.png" alt="" /-->
</div></p>
<div class="name">
<p>Lorem Ipsum</p>
<p>Generic Atlanta</p>
</div>
</div>
</a>
</section>
<section>
<a href="">
<div class="media">
</div>
<div class="bicubic">
<p><div class="circle">
<!--img src="http://images.clipartpanda.com/open-book-clip-art-black-and-white-xcgnL59cA.png" alt="" /-->
</div></p>
<div class="name">
<p>Lorem Ipsum</p>
<p>Generic Atlanta</p>
</div>
</div>
</a>
</section>
<section>
<a href="">
<div class="media">
</div>
<div class="bicubic">
<p><div class="circle">
<!--img src="http://images.clipartpanda.com/open-book-clip-art-black-and-white-xcgnL59cA.png" alt="" /-->
</div></p>
<div class="name">
<p>Lorem Ipsum</p>
<p>Generic Atlanta</p>
</div>
</div>
</a>
</section>
</menu>CSS
@import "hover.css";
*{
margin:0;
padding:0;
}
html,body{
background:#000;
}
section{
display:block;
width:150px;
height:430px;
position:relative;
background:#000;
}
section .media{
width:150px;
height:200px;
background:url(http://www.boisefamilyeyecenter.com/wp-content/uploads/2012/12/iStock_000016161547_ExtraSmall.jpg)no-repeat;
background-size:100% 100%;
transition:.5s;
position:relative;
z-index:1;
overflow:hidden;
}
.media:after{
content:'';
position:absolute;
left:0;
bottom:0;
border:150px solid transparent;
border-bottom:150px solid #000;
z-index:2;
}
.media:before{
content:'';
position:absolute;
display:block;
width:100px;
height:6px;
background:#ccc;
right:-20px;
bottom:105px;
transform:rotate(-45deg);
z-index:3;
transition:.5s;
}
.bicubic{
width:150px;
height:120px;
position:absolute;
left:0;
bottom:0;
background:#000;
text-align:center;
background:#000;
}
.circle,.circle img{
display:block;
width:50px;
height:50px;
border-radius:50px;
margin:auto;
background:#ccc;
transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.circle img{
margin:auto;
}
section{
float:left;
margin-left:4px;
}
.name{
width:150px;
color:#fff;
margin-top:5px;
}
section:hover .media{
height:270px;
background-size:120% 120%;
}
section:hover .circle{
background:#fafafa;
}
section:hover .circle{
background:gold;
}
.media:hover:before{
background:gold;
}