Hover text and button on images for mouse over

I Need Help
1

Hello guys! I was wondering if anyone knew how to do something like this! I have been trying but don’t get the text to work. Tried with a div and placed the text inside but I need everything to come up at the same time when mouse over! Any ideas?

2

There are definitely people more ‘in-the-know’ than me, and my use of Blocs is limited to only a couple of months or so (even then, not full time, just playing around and learning a lot of the time), but what immediately comes to mind would be 2 images with hover states - text embedded within the images.
But there are probably better ways I haven’t explored yet.

3

I don’t want to do it this way cause the text loses quality after compression :slight_smile:

4

Have you checked out the image overlay bric in the Bloc store?

Casey

5

Hey @Stewie_Griffin

Here is an example of how you can make up something like that in Blocs from scratch if you wanted to.

Overlay_Image_With_Text.bloc (1.4 MB)

1 Like
6

Awesome!! Thanks a lot!! I keep forgeting that you can add code into blocs!! Amazing video by the way :slight_smile:

7

Hi @PeteSharp, I tried this code, but how can I reduce image dimensions? I tried to edit width in the right menù, but the image size doesn’t change

8

Hey @theenrico are you trying to change it in the project file I posted or your own project? From memory in my project I had the image in a card, so it’s confined to the card. You don’t have to do it this way.

9

I tried to change dimensions in my project but also in yours

10

My example is using a card.

But what you can do is put everything into a Div and give that wrapping Div a class called .overlay
You would need to change the CSS to the following, which actually works with and without the card.

Then you can assign a width style on the .overlay class to what ever you want.

There are a lot of ways to do build these things, the approach you take often depends on your project.

.overlay-img {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.overlay-text {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.overlay:hover .overlay-img {
  opacity: 0.3!important;
}

.overlay:hover .overlay-text {
  opacity: 1;
}
11

hey I just saw your message! There is a problem with this bric! the overlay not responsive!

12

I am trying to do this too, without success. I have a graphic / illustration that needs to have hover text.

13

Have sent you a solution @MicaZmuera for your case.

14

Have you tried the new image overlay bric? The hover doest adapt to the size of the picture :frowning:

15

Me? No I don’t use it. Make my own.

16

I am hoping on Blocs 4 these are all added as standard and brought up to date with all the other website builders out their, needs loads of options built into the menu for quicker speed of workflow too.

1 Like
17

Hey @PeteSharp, Thanks for sharing. I’m using this bolc as a thumbnail gallery for my portfolio

Can anyone help with adding a hyperlink to the overlay (without adding a button). I can add a link to the image but it doesn’t work when the overlay is visible. I’d like to be able to click the overlay to open a page.

18

Hi @Oblique I dont use that Bric, but using Pseudo Elements as an overlay. You can extend the link to the overlay using a class called .streched-link on the image under the overlay.

1 Like
19

Cool, thanks for pointing me in the right direction @PeteSharp. I’ll have a mess around and try to get it working!

1 Like