Will Weaver Xtreme Do This? (posts show with excerpts that pop up)

[Leigh2018]

I am not even sure how to ask this question to even search for it… so I’m sorry if it is in this forum somewhere and I am missing it.

I am building a site for someone and they would like their site to have the posts show up with images and excerpts that “pop up” over the images. I believe they have used a Masonry affect, but it’s the “pop up” that she likes of the excerpt from the posts.

I imagine that is a plugin or proprietary app, and I do NOT want to change from Weaver Xtreme (still loving it!). She is supportive of using Weaver Xtreme. Just curious if Weaver Show Posts or Weaver Slider Posts is able to do that? Or some other way?

Here is a link to exactly what she is talking about. It’s just under the top menu…. https://coldcasechristianity.com

If there is a way to do it with Weaver Xtreme, I’d love to know too, since I’d like to do it for my own site. 🙂

Thanks for any help in advance.

 

 

[Weaver]

That sort of effect requires significant custom programming. The site you referenced is totally custom Javascript. There isn’t even any HTML in its source page – totally dynamic Javasript.

But I don’t know of any theme that does that. It is possible there are widgets for one of the page biulder plugins.

[scrambler]

Let me give it a shot with CSS tomorrow and I will let you know

[Leigh2018]

Thank you Weaver. That is what I was thinking. I think I saw a free WordPress.com have a “similar” feature one time, believe it or not. Was shocked!

[Leigh2018]

Scrambler, you are always going way above and beyond for us on here!  You deserve a raise! Thanks for even attempting to figure out a work around. If not possible, I totally understand and will still sing your praises. 🙂

[scrambler]

What can I say, I am a sucker for interesting challenges 🙂

Here is something that seems to work, but may prove hard to make fully responsive.

If you can give it a shot, we can see if we can tune it.

Prerequisites:

• Set the Blog featured image position to above title, centered and full size
• Hide comment bubble and meta info lines
• Make sure all Excerpts have the same length
• Set paddings and bottom margin on post areas to zero

Add the CSS below to the CSS rule box

• first 2 rules are position reference settings
• next two are the base positions and transition speeds
• last two are the hover positions

.wvrx-posts .entry-header {position:relative;}
.wvrx-posts .post-area {margin-bottom:0;position:relative;}

.wvrx-posts .post-title {position:absolute;bottom:20%;left:20px;transition:bottom 1s;}
.wvrx-posts .entry-summary {position:absolute;top:95%;left:20px;transition:top 1s;width:95%;}

.wvrx-posts .post-area:hover .post-title {bottom:50%;}
.wvrx-posts .post-area:hover .entry-summary {top:50%;}

 

 

[scrambler]

Here it is running on my test site

URL removed

with a couple more rule for clean layout (in yellow)

.wvrx-posts .entry-header {position:relative;}
.wvrx-posts .post-area {margin-bottom:0;position:relative;}

.wvrx-posts .post-title {position:absolute;bottom:20%;left:20px;transition:bottom 1s;}
.wvrx-posts .entry-summary {position:absolute;opacity:0;top:95%;left:20px;transition:top 1s, opacity 1s; width:95%;}

.wvrx-posts .post-area:hover .post-title {bottom:50%;}
.wvrx-posts .post-area:hover .entry-summary {top:45%;opacity:1;}

.wvrx-posts .blog-post-cols-2 {width:50%;margin:0;}
.blog-post-cols-2 img, .blog-post-cols-2-span-2 img {max-width:100%  !important;margin:0 !important;}

[Weaver]

That’s really interesting. Might want to add that as a feature to Weaver.

Could use some bg shading on the white text, I think. Like what is used with Block Editor gallery, for example.

[Leigh2018]

I can’t wait to try this out! Have you tested it on mobile? I’m going to work on this tomorrow and give you a link to the site.

My daughter, who helps me with some designs and is a great designer in her own right, says “Mom, those theme developers should hire you for their ads, because every time you talk about Weaver Xtreme you sound like an excited advertisement for it!” Lol! She is so right! 🙂

[scrambler]

It needed a couple more rules to not override the switch to a single column on phone (in orange)

It will probably need a few more mobile rules, as on small tablet with two columns the text is a bit too big for the image size. Depending on your images and titles/excerpt, we could reduce font size, or make it use a single column on small tablets too.

Also, to remove the continue reading you can add   to the continue reading box

.wvrx-posts .entry-header {position:relative;}
.wvrx-posts .post-title {position:absolute;bottom:20%;left:20px;transition:bottom 1s;}
.wvrx-posts .entry-summary {position:absolute;opacity:0;top:95%;left:20px;transition:top 1s, opacity 1s; width:95%;}
.wvrx-posts .post-area {margin-bottom:0;position:relative;border:2px solid white;}
.wvrx-posts .post-area:hover .post-title {bottom:50%;}
.wvrx-posts .post-area:hover .entry-summary {top:45%;opacity:1;}
.is-desktop .blog-post-cols-2, .is-tablet .blog-post-cols-2 {width:50%;margin:0;}
.blog-post-cols-2 img, .blog-post-cols-2-span-2 img {max-width:100%  !important;margin:0 !important;}
.is-phone .blog-post-cols-2 {width:100%;margin:0;}

[scrambler]

I found a way to add the gradient over the image only with CSS 🙂

.wvrx-posts .wvrx-fi-link:before {
content:"";
position:absolute;top:0px;left:0px;width:100%;height:100%;
background:url(ShadeImageUrl) no-repeat bottom;background-size:100% 80%;
}

You can download my image at the url below, it is a gradient from black to fully transparent in a png format
http://www.nicolatrwst.com/testnicola/wp-content/uploads/shade.png

@weaver, if we made that an option, it would be better to do it with the proper HTML structure. As it is, the respective positions of title and excerpt are not 100% responsive. depending on content they could collide and require tweaks.

@Leigh2018 thank you for the challenge, this was a fun one 🙂

[scrambler]

Below is a better method that is fully responsive (to the point of content not fitting in the images)

For Featured Image Excerpts use position: beside page/post no wrap, centered, full size

By using “Beside page/post no wrap”, we have a better HTML structure, with the image first, then all the posts text content (title excerpt…). That allows us to move title and excerpt together (even info lines if we want) which means that no matter their sizes, they will never collide with each other, making for a fully responsive solution.

Prerequisites:

• • Set the Blog featured image position to “beside page/post no wrap”, centered and full size
  • Hide comment bubble
  • Make sure all Excerpts have the same length
  • Set L/R paddings to 2% and bottom margin on post areas to zero
  • Set image border to 2px white

 

Add the CSS below to the CSS rule box

• • first 2 rules are positions for the post content (title and excerpt)
  • next two are the base positions and transition speeds
  • Next two are opacity for the excerpt
  • Next 3 are to get a clean no space layout of the posts when using masonry 2 columns
  • Last rule adds a dark gradient over the bottom of the FI for readability

 

 

.wvrx-posts .post-area {position:absolute; top:70%;transition:top 1s;}

.wvrx-posts .wvrx-fi-link:hover + .post-area, .wvrx-posts .post-area:hover{top:20%;}



.wvrx-posts .entry-summary {opacity:0;transition:opacity 1s;}

.wvrx-posts .wvrx-fi-link:hover + .post-area .entry-summary, 

.wvrx-posts .post-area:hover .entry-summary, .wvrx-posts .entry-summary:hover {opacity:1;}

 

.is-desktop .blog-post-cols-2, .is-tablet .blog-post-cols-2 {width:50%;margin:0;}

.blog-post-cols-2 img, .blog-post-cols-2-span-2 img {max-width:100% !important;margin:0 !important;}

.is-phone .blog-post-cols-2 {width:100%;margin:0;}

 

.wvrx-posts .wvrx-fi-link:before {

content:"";

position:absolute;top:0px;left:0px;width:100%;height:100%;

background:url(http://www.nicolatrwst.com/testnicola/wp-content/uploads/shade.png) no-repeat bottom;background-size:100% 80%;

}

 

@weaver, we will see once all tweaks are done, but using that method could be a safe responsive way

[scrambler]

And if you want to add some interest by moving the excerpt with a slight offset (what is visible on my test site right now https://www.nicolatrwst.com/testnicola/post-page-with-excerpts/)

Change the rule as per below (blue)

Also includes adjustment of the dark shade so it does not cover the 2px white border of the image (in orange)

.wvrx-posts .post-area {position:absolute; top:70%;transition:top 1s;}
.wvrx-posts .wvrx-fi-link:hover + .post-area, .wvrx-posts .post-area:hover{top:20%;}


.wvrx-posts .entry-summary {opacity:0;padding-top:5em;transition:padding-top 1s, opacity 1s;}
.wvrx-posts .wvrx-fi-link:hover + .post-area .entry-summary, 
.wvrx-posts .post-area:hover .entry-summary, .wvrx-posts .entry-summary:hover {padding-top:1em;opacity:1;}

.is-desktop .blog-post-cols-2, .is-tablet .blog-post-cols-2 {width:50%;margin:0;}
.blog-post-cols-2 img, .blog-post-cols-2-span-2 img {max-width:100%  !important;margin:0 !important;}
.is-phone .blog-post-cols-2 {width:100%;margin:0;}

.wvrx-posts .wvrx-fi-link:before {
content:"";
position:absolute;top:2px;left:2px;width:98%;height:98%;width:calc(100% - 4px);height:calc(100% - 4px);
background:url(http://www.nicolatrwst.com/testnicola/wp-content/uploads/shade.png) no-repeat bottom;background-size:100% 80%;
}

[Leigh2018]

@scrambler – I have been wanting to try this all day! But day got away from me. You are awesome to even try!

 

@weaver – would love this to be added as a feature! Maybe an easy plugin???

 

Will certainly give this code a try… if I am smart enough to get it right! LOL!

 

 

[scrambler]

Feel free to post when implemented for tweaks, it is an interesting look, and even if it does not make it as an option, I can put out a detailed tutorial.

 

[Weaver]

I don’t want to add a new option, but it seems this is really designed to work with a featured image. So it seems it would be easy and probably understandable to add it as another FI option.

[Author]

Posts