Skip to content

Instantly share code, notes, and snippets.

@NSAKGBM16CIA
Created March 7, 2023 21:46
Show Gist options
  • Save NSAKGBM16CIA/b4b2792108d91098f6609738d8a590cd to your computer and use it in GitHub Desktop.
Save NSAKGBM16CIA/b4b2792108d91098f6609738d8a590cd to your computer and use it in GitHub Desktop.
Article News Card
.container
//- Pen Info
.info
h1 Article News Card
span Made with <i class='fa fa-heart animated infinite pulse'></i> by <a href='http://andy.design'>Andy Tran</a> | Designed by <a href='http://justinkwak.com'>JustinKwak</a>
// Normal Demo
.column
.demo-title Normal
// Post
.post-module
// Thumbnail
.thumbnail
.date
.day 27
.month Mar
img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg')
// Post Content
.post-content
.category Photos
h1.title City Lights in New York
h2.sub_title The city that never sleeps.
p.description New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.
.post-meta
span.timestamp
i.fa.fa-clock- o
| 6 mins ago
span.comments
i.fa.fa-comments
a(href='#') 39 comments
// Hover Demo
.column
.demo-title Hover
// Post
.post-module.hover
// Thumbnail
.thumbnail
.date
.day 27
.month Mar
img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg')
// Post Content
.post-content
.category Photos
h1.title City Lights in New York
h2.sub_title The city that never sleeps.
p.description New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.
.post-meta
span.timestamp
i.fa.fa-clock-o
| 6 mins ago
span.comments
i.fa.fa-comments
a(href='#') 39 comments
$(window).load(function() {
$('.post-module').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 300);
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//codepen.io/andytran/pen/vLmRVp.js"></script>
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-97/variables.less';
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/mixins.less';
@accent: #e74c3c;
@container_width: 800px;
body {
background: darken(@white, 5%);
font-family: 'proxima-nova-soft', sans-serif;
font-size: 14px;
.font-smoothing;
}
.post-module {
position: relative;
z-index: 1;
display: block;
background: @white;
min-width: 270px;
height: 470px;
.box-shadow;
.transitions;
&:hover {
.box-shadow(@blur: 35px; @color: fade(@black, 30%););
.thumbnail {
img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
opacity: .6;
}
}
.post-content {
}
}
.thumbnail {
background: @black;
height: 400px;
overflow: hidden;
.date {
position: absolute;
top: 20px;
right: 20px;
z-index: 1;
background: @accent;
width: 55px;
height: 55px;
padding: 12.5px 0;
.border-radius(100%);
color: @white;
font-weight: 700;
text-align: center;
.box-size;
.day {
font-size: 18px;
}
.month {
font-size: 12px;
text-transform: uppercase;
}
}
img {
display: block;
width: 120%;
.transitions;
}
}
.post-content {
position: absolute;
bottom: 0;
background: @white;
width: 100%;
padding: 30px;
.box-size;
.transitions(@timing: cubic-bezier(.37,.75,.61,1.05));
.category {
position: absolute;
top: -34px;
left: 0;
background: @accent;
padding: 10px 15px;
color: @white;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.title {
margin: 0;
padding: 0 0 10px;
color: @dark_gray;
font-size: 26px;
font-weight: 700;
}
.sub_title {
margin: 0;
padding: 0 0 20px;
color: @accent;
font-size: 20px;
font-weight: 400;
}
.description {
display: none;
color: @gray;
font-size: 14px;
line-height: 1.8em;
}
.post-meta {
margin: 30px 0 0;
color: @light_gray;
.timestamp {
margin: 0 16px 0 0;
}
a {
color: @light_gray;
text-decoration: none;
}
}
}
}
.hover {
&:extend(.post-module:hover all);
.post-content {
.description {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
}
}
.container {
max-width: @container_width;
min-width: 640px;
margin: 0 auto;
&:before,
&:after {
content: '';
display: block;
clear: both;
}
.column {
width: 50%;
padding: 0 25px;
.box-size;
float: left;
.demo-title {
margin: 0 0 15px;
color: @gray;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
}
}
.info {
width: 300px;
margin: 50px auto;
text-align: center;
h1 {
margin: 0 0 15px;
padding: 0;
font-size: 24px;
font-weight: bold;
color: @dark_gray;
}
span {
color: @gray;
font-size: 12px;
a {
color: @black;
text-decoration: none;
}
.fa {
color: @accent;
}
}
}
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//codepen.io/andytran/pen/vLmRVp.js" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment