I have had some huge help from @PeteSharp on how to have my images zoom on hover…now the only bit i’m struggling on is how to have my images hover but have a text box at the bottom with transparency back ground.
I do this to a site I was working on in rapidweaver, but cant get this to create on Blocs.
I have attached an image to where I am and what I am after (which is the example above)
The easiest way to do this is to place a DIV under each image. Add a text box into each div. Create a custom class (such as imagetext) and set the height and padding for the text within its container. Add a background colour and adjust opacity. Next, add a negative top margin to send the text over your image. It should end up something like this:
Right, just one that - and this works 100% as a text box at the bottom of the image - thank you so much.
Only issue I have is I have added a DIV behind my image which creates a zoom on hover. When i hover…i totally lose the text. It comes back once the hover has stopped!
An example of what I am trying to achieve is on this website under the popular category’s section on the middle of the home page. There are 4 x boxes, when i hover they zoom a bit and the text stays still.
Not sure I can help you on that one - I’m not a great coder. Maybe @PeteSharp will come along and give you some insights on how to tweak the hover effect on the div for the image.
You can add the class .zoomwrap .zoomoverlay with spaces in the class manager so you have breakpoint control over fonts and background colour, may be the easiest thing to do.