A Pen by tristian o'brien on CodePen.
Created
November 21, 2013 16:34
-
-
Save tristian2/7585068 to your computer and use it in GitHub Desktop.
A Pen by tristian o'brien.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('.expand').click(function(e) { | |
| $(this).toggleClass('expanded'); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| /*add these for instance to provide support for safari 5.x*/ | |
| -webkit-transform:transition: all 0.3s ease 0s; | |
| -moz-transform:transition: all 0.3s ease 0s; | |
| -o-transform:transition: all 0.3s ease 0s; | |
| -ms-transform: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; | |
| } |
addition stylesheet elements added for wider browser support
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
diagnosing a bug in safari