Story Card Expand Details

Developer
Tom Markart
Size
4,759 Kb
Views
12,144
  1. Story Card Expand Details Previews
  2. Story Card Expand Details HTML Codes
  3. Story Card Expand Details CSS Codes

How do I make an story card expand details?

Mouseover to see more details about this article. What is a story card expand details? How do you make a story card expand details? This script and codes were developed by Tom Markart on 06 November 2022, Sunday.

Story Card Expand Details Previews
IQ Test

Story Card Expand Details - Script Codes HTML Codes

<!DOCTYPE html>
<html class="animated fadeIn">
<head> <meta charset="UTF-8"> <title>Story Card Expand Details</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://tmarkart.com/codepen/bootstrap/3.3.5/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='wrapper'> <div class='widget'> <div class='widget__photo'></div> <div class='widget__button'> <a href="javascrpt:void(0);">Read More</a> </div> <div class='widget_details'> <div class='widget_kicker'> National </div> <div class='widget_headline'> Country music legend Merle Haggard dies on his birthday at his home in Northern California </div> <div class='widget_highlights'> <span> He recorded dozens of albums and many No. 1 hits over 40 years </span> <span> Country Music Hall of Famer died of pneumonia, which he battled for months </span> <span> Haggard died of complications from pneumonia at his home in Northern California </span> </div> <div class='widget__hidden'></div> </div> </div>
</div>
</body>
</html>

Story Card Expand Details - Script Codes CSS Codes

/* Custom Variables */
body { font-family: "McClatchy Sans", "Roboto", Arial, sans-serif;
}
.wrapper { position: absolute; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.1);
}
.widget { width: 100%; max-width: 430px; height: 452px; border: 1px solid rgba(0, 0, 0, 0.2); background-color: #fff; border-radius: 4px; overflow: hidden; position: relative; -webkit-box-shadow: 0px 7px 30px 0px rgba(50, 50, 50, 0.32); -moz-box-shadow: 0px 7px 30px 0px rgba(50, 50, 50, 0.32); box-shadow: 0px 7px 30px 0px rgba(50, 50, 50, 0.32); -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.widget__photo { width: 100%; height: 300px; background: url("http://www.tmarkart.com/codepen/images/merle-haggard.jpg") no-repeat center/cover; -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
}
.widget__photo:after { -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); content: ''; width: 100%; height: 100%; position: absolute; background-color: rgba(0, 0, 0, 0.6); top: 0; left: 0; opacity: 0; z-index: 10;
}
.widget_details { padding: 20px; position: relative;
}
.widget_kicker { font-family: "McClatchy Sans Cond", "Roboto Condensed", sans-serif; font-size: 14px; color: #ba2814; text-transform: uppercase; font-weight: 600;
}
.widget_headline { font-family: "McClatchy Slab", Georgia, sans-serif; font-size: 22px; color: black; font-weight: 600; width: 100%; display: block; /* Fallback for non-webkit */ display: -webkit-box; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 66px; /* Fallback for non-webkit */
}
.widget_highlights span { color: rgba(0, 0, 0, 0.7); font-size: 16px; display: none; width: 100%; margin-bottom: 4px; border-bottom: 2px dotted #ccc; padding-bottom: 10px; margin-bottom: 10px;
}
.widget_highlights span:first-of-type { margin-top: 15px;
}
.widget_highlights span:last-child { border-bottom: none; margin-bottom: 0;
}
.widget__overlay { visibility: hidden; opacity: 0; position: absolute; height: 100%; background-color: rgba(0, 0, 0, 0.6);
}
.widget__button { cursor: pointer; -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); position: absolute; margin: 0 auto; padding: 10px 0; width: 70%; background-color: #ba2814; border-radius: 4px; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-size: 14px; left: 0; right: 0; top: -40px;
}
.widget__button a { color: #fff;
}
.widget:hover .widget__button { top: 40px; font-family: "McClatchy Sans Cond", "Roboto Condensed", sans-serif; text-transform: uppercase;
}
.widget:hover .widget__photo { height: 100px; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3);
}
.widget:hover .widget__photo:after { opacity: 1;
}
.widget:hover .widget_headline { -webkit-line-clamp: 3; height: 99px; /* Fallback for non-webkit */
}
.widget:hover .widget__overlay { visibility: visible; opacity: 1;
}
.widget:hover .widget_highlights span { display: block;
}
Story Card Expand Details - Script Codes
Story Card Expand Details - Script Codes
Home Page Home
Developer Tom Markart
Username tmarkart
Uploaded November 06, 2022
Rating 3
Size 4,759 Kb
Views 12,144
Do you need developer help for Story Card Expand Details?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom Markart (tmarkart) Script Codes
Name
MPP Contact Us
Election Widget Combo
Google Places API Parsing
Pipleline Opportunities Email
Skewed Header - svg
Google Matched Content - rendered
McClatchy Newsrooms
Select2
Story Detail 1.0b
Vertical Image Filler
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!