Programmer Academy

Search

  • Link 4 Link 4
    Test long description goes here. Test long description goes here. Test long description goes here. Test long description goes here. Test long description goes here. Test long description goes here. 
  • Link 3 Link 3
    Test long description goes here. Test long description goes here. Test long description goes here. Test long description goes here. Test long description goes here. Test long description goes here.
  • Link 1 Link 1
    Test long description goes here. Test long description goes here. Test long description goes here. Test long description goes here. Test long description goes here. Test long description goes here.
This style is the same as any content with hover effect, except that there is a smooth vertical transition which makes the long description/read more button/etc content appear. 

The images are set to display three in a row, with images at 33% (100% divided by 3). Simply adjust the percentages to display more images. 

Media queries would be necessary at tablet/mobile view if you want the images to stack. 
This is currently set for links, but can also be applied to photos, lists, etc with minor tweaks to the css so that the appropriate content displays.

Link Image

width: 100%;
height: 100%;
margin: 0;
padding: 0;

Group

display: inline-block;
width: -moz-calc(33% - 3px);/*firefox*/
width: -webkit-calc(33% - 3px);/*webkit*/
width: calc(33% - 3px); /*standard*/
float: left;
margin-left: 3px;
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
height: 300px;
overflow: hidden;

Group :Before /*styles the arrow*/

content: '';
position: absolute;
top: 230px;
left: -webkit-calc(50% - 30px);
/*(webkit*/
left: -moz-calc(50% - 30px);
/*firefox*/
left: calc(50% - 30px);
/*standard*/
display: block;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #830c28;

URL Link / H4 Title / Etc

background-color: #830c28;
color: white;
padding: 10px;
margin: 0;
width: 100%;
font-weight: 100;
display: block;
position: absolute;
top: 250px;
right: 0;
bottom: 0;
left: 0;
text-decoration: none;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
-ms-transition: all 0.5s ease-in-out;
transition: top 1s;
background: radial-gradient(circle, #99091e, #830c28);
font-size: 23px;


Long/Brief Description

position: absolute;
bottom: -300px;
padding: 30px;
color: #fff;
visibility: hidden;
letter-spacing: .5px;
line-height: 20px;
font-weight: 100;

Custom CSS

 
.style-10448 li.group:hover a {
top: 0;
transition: top 1s, bottom 1s;
-moz-transition: top 1s, bottom 1s;
-webkit-transition: top 1s, bottom 1s;
-o-transition: top 1s, bottom 1s;
-ms-transition: top 1s, bottom 1s;
}

.style-10448 .group:hover .long-description {
display:block;
visibility:visible;
bottom:0;
transition: top .2s, bottom 1s;
-moz-transition: top .2s, bottom 1s;
-webkit-transition: top .2s, bottom 1s;
-o-transition: top .2s, bottom 1s;
-ms-transition: top .2s, bottom 1s;
}

.style-10448 li.group:hover:before {
top: -30px;
transition: top 1s, bottom 1s;
-moz-transition: top 1s, bottom 1s;
-webkit-transition: top 1s, bottom 1s;
-o-transition: top 1s, bottom 1s;
-ms-transition: top 1s, bottom 1s;
}/*arrow on group*/