Uikit 3 news card section

index.html

<div class="uk-section">
  <div class="uk-container">
    <div class="uk-grid uk-grid-medium" uk-height-match="target: > div > .uk-card; row: false" uk-grid>
    <div class="uk-width-1-2@m">
        <div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin featured uk-background-cover" uk-grid>
    <div class="uk-card-media-left uk-cover-container">
        <img src="https://getuikit.com/docs/images/light.jpg" alt="" hidden uk-cover>
        <canvas width="600" height="400"></canvas>
    </div>
    <div>
        <div class="uk-card-body featured-text">
            <h4>Media Left</h4>
            <p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt consectetur adipiscing elit, sed do eiusmod tempor incididunt consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        </div>
    </div>
</div>
    </div>
      <div class="uk-width-1-4@m">
        <div class="uk-card uk-card-default uk-card-body uk-background-cover card-hover news-cards">
      <div class="uk-card-body-small news-text-bck uk-position-bottom" style="box-sizing: border-box;">
        <p class="uk-light uk-padding-small uk-padding-remove-bottom uk-margin-remove-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="uk-text-small subtitle-text-block uk-light uk-margin-remove-top">Quisque vulputate maximus varius. Fusce scelerisque elit in massa fringilla, eu laoreet nisl porttitor.</p>
</div></div>
    </div>
    
      <div class="uk-width-1-4@m">
    <div class="uk-card uk-card-default uk-card-body uk-background-cover card-hover news-cards">
      <div class="uk-card-body-small news-text-bck uk-position-bottom" style="box-sizing: border-box;">
        <p class="uk-light uk-padding-small uk-padding-remove-bottom uk-margin-remove-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="uk-text-small subtitle-text-block uk-light uk-margin-remove-top">Quisque vulputate maximus varius. Fusce scelerisque elit in massa fringilla, eu laoreet nisl porttitor.</p>
</div></div>
        </div>
      <div class="uk-width-1-4@m">
        <div class="uk-card uk-card-default uk-card-body uk-background-cover card-hover news-cards">
      <div class="uk-card-body-small news-text-bck uk-position-bottom" style="box-sizing: border-box;">
        <p class="uk-light uk-padding-small uk-padding-remove-bottom uk-margin-remove-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="uk-text-small subtitle-text-block uk-light uk-margin-remove-top">Quisque vulputate maximus varius. Fusce scelerisque elit in massa fringilla, eu laoreet nisl porttitor.</p>
</div></div>
    </div>
      <div class="uk-width-1-4@m">
        <div class="uk-card uk-card-default uk-card-body uk-background-cover card-hover news-cards">
      <div class="uk-card-body-small news-text-bck uk-position-bottom" style="box-sizing: border-box;">
        <p class="uk-light uk-padding-small uk-padding-remove-bottom uk-margin-remove-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="uk-text-small subtitle-text-block uk-light uk-margin-remove-top">Quisque vulputate maximus varius. Fusce scelerisque elit in massa fringilla, eu laoreet nisl porttitor.</p>
</div></div>
    </div>
      <div class="uk-width-1-4@m">
         <div class="uk-card uk-card-default uk-card-body uk-background-cover card-hover news-cards">
      <div class="uk-card-body-small news-text-bck uk-position-bottom" style="box-sizing: border-box;">
        <p class="uk-light uk-padding-small uk-padding-remove-bottom uk-margin-remove-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="uk-text-small subtitle-text-block uk-light uk-margin-remove-top">Quisque vulputate maximus varius. Fusce scelerisque elit in massa fringilla, eu laoreet nisl porttitor.</p>
</div></div>
    </div>
      <div class="uk-width-1-4@m">
        <div class="uk-card uk-card-default uk-card-body uk-background-cover card-hover news-cards">
      <div class="uk-card-body-small news-text-bck uk-position-bottom" style="box-sizing: border-box;">
        <p class="uk-light uk-padding-small uk-padding-remove-bottom uk-margin-remove-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="uk-text-small subtitle-text-block uk-light uk-margin-remove-top">Quisque vulputate maximus varius. Fusce scelerisque elit in massa fringilla, eu laoreet nisl porttitor.</p>
</div></div>
    </div>
      
</div>

scripts

<script src="https://getuikit.com/assets/uikit/dist/js/uikit.js?nc=743"></script>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit-icons.js?nc=743"></script>

style.scss

.featured{
  background-image: url("https://picsum.photos/620/350/?image=690");
}
.news-cards{
  background-image: url("https://source.unsplash.com/random");
  padding-left:30px;
}
.featured-text{
  background-color: #ffffffc2;
}
.news-text-bck {
	background-color: #000000c7;
	transition: all 0.15s ease-out;
}
.news-text-bck:hover {
	/* white-space: normal; */
	transition: all 0.15s ease-out;
	background-color: rgba(0, 0, 0, 0.78);
}
@mixin multiLineEllipsis($lineHeight: 1.4em, $lineCount: 1, $bgColor: white) {
	overflow: hidden;
	position: relative;
	line-height: $lineHeight;
	max-height: $lineHeight * $lineCount;
	margin-right: 1em;
	padding-right: 1em;
	padding-left: 1em;
	padding-top: 1em;
	transition: all 0.35s ease-out;
		&:before {
    font-family: 'fontawesome';
		content: '\f107';
		position: absolute;
		right: 0;
		bottom: 0;
	} 
	&:after {
		content: '';
		position: absolute;
		right: 0;
		/* width: 1em;
		height: 1em; */
		margin-top: 0.2em;
		background: $bgColor;
	}
}

.subtitle-text-block {
	@include multiLineEllipsis(
		$lineHeight: 1.4em,
		$lineCount: 0,
		$bgColor: white
	);
}
.card-hover:hover .subtitle-text-block {
	transition: all 0.35s ease-out;
	max-height: 9em;
}
.card-hover:hover .subtitle-text-block:before {
	content: '';
	transition: all 0.35s ease-out;
}

styles

<link href="https://getuikit.com/assets/uikit/dist/css/uikit.css?nc=743" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

uikit-3-news-card-section.markdown

Uikit 3 news card section

A Pen by Igor on CodePen.

License.