Text and zoom on hover

I Need Help
1

Hi all,

I know this is simple for you experts !! but I have an many images and I would like to simply add a bar on the bottom with text through it - I have seen a video by adding a button etc? but surely there is a quicker way now since blocs has been developed.

Also is there any free brics or way to have the image zoom in a little on hover?

2

I am bit rushed at the moment but I think you could do that easily enough with a card bric, then add an image inside and have text underneath. Check out the feature blocs for some examples.

If you want to take this to another level card designer is very flexible. I am sure @Whittfield could answer any questions about that.

1 Like
3

fab - thanks so much, ill check out both options.

4

Hi all,

I have found a website with exactly what I am after.

On the American Golf home page, there is a section saying Popular Categories and 4 x boxes with a box on bottom with the title of the section and if you hover over it - it has a small hover which looks nice and simple. https://www.americangolf.co.uk

Is this possible with the tools that are built into blocs?

5

Yes, but you will need to add some CSS into the page header.

Lots of example code online for creating this effect.

EDIT: Posted example further down thread.

1 Like
6

Thanks @PeteSharp - there link, I should be able to adapt this for what I want - huge thanks.

One problem I do have it !!! - How to apply this? I have never done css on Blocs yet and unsure how to create this.

I have some images which I want this to apply, this is what I have done:
1- selected the image i want to zoom
2- clicked on the bric icon under it
3- added the Code Widget bric

On preview, a section zooms above my image ! or below it…but nothing happens to the image at all. I am unsure how to apply this? or what custom class i need if so ?

Then i need to work out how to the put the text bar inside it and make it responsive !!!

Thanks again.

7

The way it works is the image needs to be placed inside a Div, this is so the image is contained when it zooms.

Add a Div Bric, drag your image into it. And then apply the class to the Div.

For example, following that code example, the div needs a class called zoomin and one called frame

There are probably better examples of how to do it. If no one else answers, I’ll give you a better example later tonight.

1 Like
8

Brilliant, thanks @PeteSharp - ill have a play today with it and see what happens, ill report back!

9

Hey @AdieJAM,

I just made my own one in the end, its more simple…

Image_Hover_Zoom.bloc (1.4 MB)

My CSS

<style>
.zoomwrap {
  overflow: hidden;
  position: relative;
}
.zoomwrap img {
  transition: transform .4s;
  width: 100%;
}
.zoomwrap:hover img {
  transform: scale(1.2);
}
</style>
2 Likes
10

brilliant !..ill try this one as i couldt’nt get the other one to work, it kept expanding.

I there a way I can incorporate a text box inside this at the bottom?