Hover text and button on images for mouse over

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?

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.

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

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

Casey

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

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

Hi @Malachiman, 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

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.

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

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;
}

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

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

Have sent you a solution @MicaZmuera for your case.

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

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

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