AlxMedia/blogcards
1
0
Fork 0
mirror of https://ghproxy.net/https://github.com/AlxMedia/blogcards.git synced 2025-08-26 05:49:02 +08:00
Code Issues Projects Packages Wiki Activity Actions

Add zoom hover effect on blog picture cards

Browse source
This commit is contained in:
Alexander Agnarson 2024-04-15 15:15:37 +02:00
parent 4ff5960970
commit e6642bb209
6 changed files with 18 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

5
content.php
View file

@ -7,10 +7,11 @@
<div class="blog-card-right-inner" style="background-image:url('<?php the_post_thumbnail_url('blogcards-medium'); ?>');">
<a href="<?php the_permalink(); ?>" class="blog-card-link"></a>
<div class="blog-card-date"><i class="far fa-calendar"></i> <?php the_time( get_option('date_format') ); ?></div>
</div>
<div class="blog-card-date"><i class="far fa-calendar"></i> <?php the_time( get_option('date_format') ); ?></div>
</div>
<div class="blog-card-left">

2
dark.css
View file

@ -48,7 +48,7 @@ body:where(.dark) #footer { background: rgba(255,255,255,0.08); box-shadow: inse
body:where(.dark) .slick-featured,
body:where(.dark) .blog-card,
body:where(.dark) .blog-card-single-content { background: #333; box-shadow: none; }
body:where(.dark) .blog-card-single-content { background: #333; box-shadow: inset 0 0 2px rgba(255,255,255,0.2); }
body:where(.dark) .blog-card-author { border-bottom-color: rgba(255,255,255,0.06); }
body:where(.dark) .blog-card-bottom { background: #333; box-shadow: inset 0 0 2px rgba(255,255,255,0.2)!important; }

1
functions/dynamic-styles.php
View file

@ -121,6 +121,7 @@ body.boxed #header { max-width: '.esc_attr( get_theme_mod('container-width') ).'
$styles .= '
.slick-featured,
.blog-card,
.blog-card-right,
.blog-card-right-inner,
.blog-card-bottom,
.blog-card-bottom-list li.blog-card-more a,

4
readme.txt
View file

@ -68,6 +68,10 @@ Blog images
== Changelog ==
= 1.0.3 - 2024-04-15 =
* Added box shadow to dark cards
* Added slight zoom on hover over large featured images
= 1.0.2 - 2024-04-15 =
* Improved responsive css and top carousel styling
* Updated screenshot

10
single.php
View file

@ -6,13 +6,11 @@
<div class="blog-card-right">
<div class="blog-card-right-inner" style="background-image:url('<?php the_post_thumbnail_url('blogcards-large'); ?>');">
<div class="blog-card-right-inner" style="background-image:url('<?php the_post_thumbnail_url('blogcards-large'); ?>');"></div>
<div class="blog-card-date"><i class="far fa-calendar"></i> <?php the_time( get_option('date_format') ); ?></div>
<?php do_action( 'alx_ext_sharrre' ); ?>
</div>
<div class="blog-card-date"><i class="far fa-calendar"></i> <?php the_time( get_option('date_format') ); ?></div>
<?php do_action( 'alx_ext_sharrre' ); ?>
</div>

8
style.css
View file

@ -482,8 +482,10 @@ body { background: #f6f7fa; }
.blog-card-inner { display: flex; align-items: stretch; width: 100%; }
.blog-card-left { width: 50%; position: relative; order: 1; }
.blog-card-left-inner { padding: 30px 30px 0; box-sizing: border-box; position: absolute; left: 0; right: 0; top: 0; bottom: 120px; mask-image: linear-gradient(0deg, transparent, #000 20%, #000 100%, transparent 100% ); }
.blog-card-right { width: 50%; position: relative; order: 2; }
.blog-card-right-inner { background-color: #dfe0e4; background-position: center center; background-size: cover; height: 100%; position: relative; }
.blog-card-right { width: 50%; position: relative; order: 2; overflow: hidden; }
.blog-card-right-inner { background-color: #dfe0e4; background-position: center center; background-size: cover; height: 100%; position: relative; transition: 0.3s; }
.blog-card-right:hover .blog-card-right-inner { transform: scale(1.05); }
.blog-card-single-head .blog-card-right:hover .blog-card-right-inner { transform: none; }
.blog-card-link { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.blog-card-date { position: absolute; right: 40px; top: 36px; color: #fff; padding: 4px 10px; background: rgba(0,0,0,0.16); box-shadow: inset 0 1px 0 rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.06); text-shadow: 0 1px 0 rgba(0,0,0,0.1); }
@ -519,7 +521,7 @@ body.search .type-page .blog-card-date { display: none; }
.blog-card-single-head .blog-card-right { width: 100%; aspect-ratio: 16/6; }
.blog-card-single-head .blog-card-bottom { position: static; box-shadow: none; }
.blog-card-single-head .blog-card-bottom-list li.blog-card-more a i { margin-right: 0; }
.blog-card-single-content { background: #fff; position: relative; box-shadow: 0 0 0 1px #12376914,0 1px 1px #1237690a,0 3px 3px #12376908,0 6px 4px #12376905,0 11px 4px #12376903; margin-left: 40px; margin-right: 40px; padding-top: 40px; margin-top: -100px; margin-bottom: 60px; }
.blog-card-single-content { background: #fff; position: relative; box-shadow: 0 0 0 1px #12376914,0 1px 1px #1237690a,0 3px 3px #12376908,0 6px 4px #12376905,0 11px 4px #12376903; margin-left: 40px; margin-right: 40px; padding-top: 40px; margin-top: -101px; margin-bottom: 60px; }
.blog-card-single-content:after { height: 12px; position: absolute; bottom: -12px; z-index: -1; left: 40px; right: 40px; content: ""; pointer-events: none; background: rgba(255,255,255,.8); box-shadow: 0 0 0 1px #12376914,0 1px 1px #1237690a,0 3px 3px #12376908,0 6px 4px #12376905,0 11px 4px #12376903; }
.blog-card-single-content .blog-card-author { padding-bottom: 0; margin-bottom: 20px; border: 0; }