[Resolved] I need a hand with a hover effect on view (I'm a newbie but I want to learn)

[Author]

Posts

[hernanL]

Dear Toolset team,

I'm working locally, I'm a novice user and I'm drinking from your documentation and wherever I can. I would like to get a simple view that shows a gallery in the form of a grid with the hover effect of showing text with a black background when the mouse is over the image

I have no problems with making a functional grid view with dynamic images (your tutorials are explanatory and easy to follow), but I'm having a hard time getting the desired hover effect. For reference I'm trying to do this (with the difference of dynamic images, of course):

hidden link

When I apply the "cover" block I have noticed that the loop is interrupted, the dynamic image is applied but the rest of the css styles are not applied correctly and I do not get the desired result. I'm still learning, any advice is very welcome, not sure where to look for information

Thank you very much best regards

[Luo Yang]

Hello,

It needs custom CSS codes, please share a test site with the same problem, fill below private message box with test site login details, also point out the problem page URLs, I can setup a demo for you

[Luo Yang]

Thanks for the details, I can login into your website, please point out the problem page URL in your website, where I can see the view block and cover block you mentioned above?
And you can follow our document to add custom CSS codes into view block:
https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/#steps-for-adding-css-to-a-view
section "Steps for adding CSS to a View"

[hernanL]

Thanks for replying, the page where I'm testing is "raw-grid-original-built-with-blocks". What appears on the home page is just a divi module (I am using it as a shortcode only, please do not consider)

I finally decided to remove the cover block, I think it's an unnecessary complication in my case. When a "Dynamic Sources" is applied to the cover block, it visually works, but the loop is interrupted for consecutive elements. I think the most logical thing is to keep the functional grid that is achieved with the block constructor, and from there do everything using CSS

I've decided to take it easy, take a few steps back, learn CSS well, and try again. Right now it's just the grid but in the future it will still be good for me to know about that schematization language. Please don't close the ticket yet, I'm learning as fast as I can

[Luo Yang]

I have marked this thread as "Waiting for feedback" status, please update here if you still need assistance for it, and here is the document for "Adding Custom CSS to Templates, Archives and Views in WordPress":
https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/
For your reference.

[hernanL]

I found solution to my problem

For reference: for the hover effect the cover block should NOT be used, instead it is better to use a Toolset Container block and there use a dynamic background image. In this way the loop is not interrupted and with patience the hover effect can be achieved

I have a couple more questions but they have no reference to the hover effect, I think the most appropriate thing is to open a new thread

Thanks for the patience and support !