Commit 407459d9 authored by Benthe Kuijpers's avatar Benthe Kuijpers
Browse files

news teaser blend mode

parent 478873b0
...@@ -3,11 +3,16 @@ ...@@ -3,11 +3,16 @@
.img-wrapper { .img-wrapper {
line-height: 0; line-height: 0;
display: block; display: block;
box-shadow: 3px 3px 0 $bg-yellow; @include colourBg($bg-yellow, 0deg);
img { img {
mix-blend-mode: multiply;
max-width: 100%; max-width: 100%;
} }
&:hover img {
mix-blend-mode: normal;
}
} }
a { a {
......
<article class="news-teaser"> <article class="news-teaser">
<a href="<?php echo get_the_permalink($news_post); ?>" class="img-wrapper"> <a href="<?php echo get_the_permalink($news_post); ?>" class="img-wrapper">
<div>
<?php if (has_post_thumbnail($news_post)) { <?php if (has_post_thumbnail($news_post)) {
echo get_the_post_thumbnail($news_post, 'medium-thumb'); echo get_the_post_thumbnail($news_post, 'medium-thumb');
} else { } else {
echo '<img src="' . get_template_directory_uri() . '/assets/img/placeholder.jpg">'; echo '<img src="' . get_template_directory_uri() . '/assets/img/placeholder.jpg">';
} ?> } ?>
</div>
</a> </a>
<a href="<?php echo get_the_permalink($news_post); ?>" class="text-wrapper"> <a href="<?php echo get_the_permalink($news_post); ?>" class="text-wrapper">
<div class="label"><?php echo strtolower(get_the_date('j F Y', $news_post)); ?></div> <div class="label"><?php echo strtolower(get_the_date('j F Y', $news_post)); ?></div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment