Return to previous page

Blog hovering with button when clicking on read more.

This topic has 12 replies, 3 voices, and was last updated 2 years, 9 months ago ago by Olga Barlow

gewoonbovenaan

Participant

February 24, 2022 at 10:20

Hi, We have added the blog post but cant find out how with Xstore we can have a blog https://gyazo.com/ce76b42a04dc8f5282f29aa5dd8487d3 like this. when hovering hover the blog post with no text or byline.
https://elastic-torvalds.185-95-14-179.plesk.page/nieuws/
Is that possible?

Also the icons remain very small, how can i increase size? when i use content zoom, everything gets bigger not only the icons.

https://gyazo.com/75a1c1ac6737be358d735d5f6b636842
https://gyazo.com/52eccc41b34bb4f0069e2d1bacbf9c68

Thanks

Please, contact administrator
for this information.

#318307 Copied Theme version: 8.1

11 Answers
Olga Barlow

Support staff

February 24, 2022 at 15:21
Hello,

You can try code below in Theme Options > Custom CSS
```
.wp-picture .blog-mask {
    height: 50px;
    top: auto;
}
.wp-picture .blog-mask:before {
    background-color: #000;
    opacity: 1;
}
article.blog-post .wp-picture.blog-hover-animated .btn, article.post-grid .wp-picture.blog-hover-animated .btn {
    width: 100%;
}
article.blog-post .wp-picture.blog-hover-animated:hover .svg-wrapper:hover .btn, article.post-grid .wp-picture.blog-hover-animated:hover .svg-wrapper:hover .btn {
    color: #fff;
    text-decoration: underline;
}
article.blog-post .wp-picture.blog-hover-animated .svg-wrapper svg, article.post-grid .wp-picture.blog-hover-animated .svg-wrapper svg {
    display: none;
}
```
2/ You can increase the size of the text in the whole header (Theme Options > Header builder > Main header > content zoom option). If you want to make larger only these icons add the below code to custom
```
.et_element.et_b_header-contacts {
    font-size: 20px;
}
```
Regards
#318339 Copied
gewoonbovenaan

Participant

February 24, 2022 at 16:07

Looks good but the hover button is up now, can it be at the bottom? https://gyazo.com/7a96958d0f4cfae444cb2a4016fa5fd0 how can i set the blog posts next to eachother with 4 inline? and the titel in the middle of the image?

#318352 Copied
Olga Barlow

Support staff

February 24, 2022 at 16:22
Hello,

Because you changed the code.
I sent you
```
.wp-picture .blog-mask {
    height: 50px;
    top: auto;
}
```
but you have
```
.wp-picture .blog-mask {
    height: 50px;
    bottom: auto;
}
```
Regards
#318357 Copied
gewoonbovenaan

Participant

February 25, 2022 at 10:32

yes because with the
.wp-picture .blog-mask {
height: 50px;
top: auto;
}

It didnt work https://gyazo.com/f6ed8b906eabb3eadc872013780573a0 and as i wanted to have at the bottom i have tried bottom: auto; but didnt work either. is it fixable? How can i set the blog posts next to eachother with 4 inline? and the titel in the middle of the image?

#318420 Copied

Rose Tyler

Support staff

February 27, 2022 at 16:51

Hello,

We’ve changed the custom CSS code. Please check.

Regards

#318555 Copied

gewoonbovenaan

Participant

February 28, 2022 at 10:45

thanks, only the text should be in the middle of the image. how to do that?
When i make it 3 next to eachother instead of 4 in row which css do i use?

@media only screen and (min-width: 993px) {
.et-blog .blog-post {
width: 25%;
}
.et-blog .blog-post:nth-child(4n + 1) {
clear: both;
}
}

#318593 Copied

Olga Barlow

Support staff

February 28, 2022 at 14:06

Hello,

Check now, please.

Regards

#318637 Copied

gewoonbovenaan

Participant

February 28, 2022 at 14:17

very nice! thank you.
how can i add the text in the middle?

#318639 Copied

Olga Barlow

Support staff

February 28, 2022 at 15:33

Hello,

Do you want to display that this way https://gyazo.com/c451dfcf099b97b0aa516d8a5a0164b0 ?

Regards

#318658 Copied

gewoonbovenaan

Participant

February 28, 2022 at 16:46

How it is, is great.

When hovering the read more is at bottom is nice. But i mean the title of the topic like this: https://gyazo.com/c429e5198399353afee8fabbbcdcd5d6

Now it is under the image. but should be in the middle.

Thanks!

#318669 Copied

Olga Barlow

Support staff

February 28, 2022 at 17:43

Hello,

Added custom. Check now.

Regards

#318673 Copied
Tagged: blog, button, hovering, read more, themes, woocommerce, wordpress
Viewing 12 results - 1 through 12 (of 12 total)