Text over images, but not to zoom

Hi all,

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)

Thanks all.

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:

There may be more slick ways to achieve this - but this option works for me.

Thanks - ill give this a go. I have a DIV already behind the image, so ill see if one behind works too.

many thanks

Hi there,

I am stuck at the negative top margin part? (sorry!)

Here are the screenshots of the custom class settings I used:

1 Like

Brilliant!..thank you !!!

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.

LINK

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.

Here you go @AdieJAM

Place another Div under the image and place your text in that. Give that Div a class, in this case I called it .zoomoverlay
The updated CSS

<style>
.zoomwrap {
  overflow: hidden;
  position: relative;
}
.zoomwrap img {
  transition: transform .4s;
  width: 100%;
}
.zoomwrap:hover img {
  transform: scale(1.2);
}
.zoomwrap .zoomoverlay {
 position: absolute;
 bottom: 0;
 padding: 10px;
 width: 100%;
 color: #fff;
 text-align: center;
 background-color: rgba(0,0,0,0.5);
}
</style>

Image_Hover_Zoom_Text_Overlay.bloc (1.4 MB)

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.

3 Likes

thanks guys, and thanks for sending me the codes - brilliant @PeteSharp, ill try this tomorrow when i am back in.

top stuff

Thank you Malachiman. Great.
This works perfect.
But …
This should be implemented in Blocs without the need of coding. @Norm ??

There is an overlay Bric I think. But it’s limited.

It’s also a great feature of Blocs to be so flexible beyond the standard Brics.

Exactly.
Your code is perfect and that’s how it should be.