I want the grids exactly in this way

Some of them worked.
1. I can't see any difference between the Image hover zoom (It's still the same).
2. I don't want transition effect in the rectangle shape, I want it to mix in the background (like you can check the link of the website where you can find the background title transition method).

1. You added the CSS again instead of removing the existing CSS. You'll want to remove both sets of CSS now.
2. I'm not sure what you mean. This is what your link shows: https://www.screencast.com/t/jxyR4wMn

1. Zoom Hover is gone but i want some other hover effect!
2. It might not be displaying correctly, please check the private message, I have dropped some other website link. I want the title background transition and the grid hover in the same way

It's hard to guess what kind of effect you're wanting, but you could do something simple like this:

.page-hero.wpsp-grid .post {
    padding-bottom: 0 !important;
    background: #000;
}

.page-hero.wpsp-grid .post:hover .wp-show-posts-image {
    opacity: 0.5;
}

.page-hero.wpsp-grid .wp-show-posts-image {
    transition: opacity 500ms;
}

Thank you very much
1. Transition is exactly the same for what I am looking for.
2. But, I want to remove the rectangle shaped black colour in title area. Let me explain you what I am looking for. Whenever there is a white featured image, as the title is also white in color, We may not be able to see the title. So, to avoid this, I want to add some black color portion in title background.
A better example for this is bottom Vignette. I hope you will get it now,

Hey, Here's a clear example (Image in private).
1. In the left area, the title is white in color and the background color is also white. So, as a result we were unable to see the title.
2. In the right area, the title and background both are white, but the title is visible. Because, I have added some black portion (Vignette).
I want to achieve the right part for the Magazine grids

You could do something like this:

.page-hero.wpsp-grid .wpsp-content-wrap {
    background: linear-gradient(0deg, rgba(0,0,0,0.9), transparent);
    padding-top: 100px;
}

Then remove this:

.page-hero.wpsp-grid .wp-show-posts-entry-header {
    background: rgba(0,0,0,0.5);
}

Hey, Thanks for it!
It worked and everything is alright. Need a few more finishes
1. I want to hide the first two grids in the mobile view and display the other two grids
2. The post date and categories are showing in black color on the Magazine grid. I want o make them in white color

Can anyone reply to this?

It's almost 24 hours but I still didn't get any reply. The theme is good but it has worst customer support

Rohith,

Saying our theme has the worst customer support when we've spent 4 pages trying to help you achieve something that isn't a feature in the theme seems a little unfair. We've gone above and beyond to try to help.

1. I'm not sure what you mean. You're wanting to hide the first two posts in the magazine grid on mobile? If so, you can do this:

@media (max-width: 768px) {
    .page-hero.wpsp-grid article:nth-child(1),
    .page-hero.wpsp-grid article:nth-child(2) {
        display: none;
    }
}

2. I'm not seeing this. The post titles and post meta are all white.

Because I have been waiting since the past 4 days and it's still not getting completed. However, I am sorry for saying in that way.

1. The css worked.
2. I have used some css from dispatch theme and it worked.
3. I want to create some space between the title and elements (date & categories). (on grids) Image in private.
4. Create a 2 cm space in between secondary navigation and magazine grids

Because I have been waiting since the past 4 days and it’s still not getting completed.

I understand, but our goal here is to help our customers with issues and questions regarding the theme. We aren't able to offer custom development and general development services. If you need custom development to be done quickly, I suggest going with a service like Codeable.io, as we suggest here: https://generatepress.com/what-support-includes/

3. This should do it:

.page-hero.wpsp-grid .wp-show-posts-entry-title {
    margin-bottom: 5px;
}

4. Try this:

.secondary-navigation {
    margin-bottom: 10px;
}

Hey Thanks Tom, the design part is almost over. I would really appreciate your patience for helping me. But my client has changed his mind by seeing some other website. I want the home page grids to look exactly in this way. This could be the last change of this topic, please help!

Hi Rohith,

Unfortunately, I'm not able to do custom design work like this in the forum.

You may benefit from a service like Codeable.io.

If you run into any theme-related bugs or questions, please feel free to let us know.

Thanks!