A Pen by Anonasaurus Rex.

An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by Secret Sam on CodePen.

License.

index.html

<a class="tile tile4" href="https://arupcctest.sharepoint.com/sites/newscentre/Global/Pages/ARUP_NewsArticleGlobalCP01.aspx">
<img src="/SITES/NEWSCENTRE/PUBLISHINGIMAGES/1.JPG?RenditionID=5">
<span class="title">	Hosni Mubarak released from prison and flown to Cairo military hospital - 05/08/2013 </span>
<span class="description">	Summary of the page. ARUP Global news centre first article </span>
</a>

script.js

$('.expand').click(function(e) {
	    $(this).toggleClass('expanded');
	});

style.css

.tile:hover .description {
  bottom:0

}
.tile .description {
    background: none repeat scroll 0 0 #333333;
    bottom: -100%;
    color: #FFFFFF;
    display: block;
    height: inherit;
    left: 0;
    max-height: 100%;
    opacity: 0.9;
    padding: 5px;
    position: absolute;
    text-align: left;
    transition: all 0.3s ease 0s;
}
a.tile, a.tile:link, a.tile:visited, a.tile:active, .tile.double:hover {
    color: #000000;
}
a.tile, a.tile:link, a.tile:visited, a.tile:active, .tile.double:hover {
    color: #000000;
}
.tile {
    text-align: center;
}
a, .ms-link:visited {
    color: #CC3366;
}
.ms-webpart-chrome {
    border-spacing: 0;
}
body, .ms-core-defaultFont, .js-callout-body {
    color: #444444;
}
body, .ms-core-defaultFont, #pageStatusBar, .ms-status-msg, .js-callout-body {
    font-family: "Arial","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size: 13px;
}