Transparent Hover on an image

Support
#1

Hey Guys,

I have an image and want to lay over this, a transparent hover with text inside. Is there a way to do that with Custom CSS ? I allready try this:

a.x-img.Bild1 {
   background: http://www.lichtblick-roeckle.wwwerbeagentur.com/wp-content/uploads/2017/09/Hover_Lichtblick_GmbH.jpg
   no-repeat center top;
   background-size: contain;
   transition: 0.25s all ease-in-out;
}

a.x-img.Bild1 :hover img {
   opacity: 0,2;
   transition: 0.25s all ease-in-out;
}

Where is the mistake?

My URL is:
http://www.lichtblick-roeckle.wwwerbeagentur.com/

and here is a screenshot of how it should looks like:

Thanks for your great help!

#2

Hi there,

Please provide us with the password to the page so that we could check it.

Thank you.

#3
Summary

URL
USER
PW

#4

Hey Jade

I already update the CSS code to :

a.x-img.Pic1 {
   background: http://www.lichtblick-roeckle.wwwerbeagentur.com/wp-content/uploads/2017/09/Hover_Bild1_neu.jpg
   background-size: contain;
   transition: 0.25s all ease-in-out;
}

a.x-img.Pic1 :hover img {
   opacity: 0,2;
   transition: 0.25s all ease-in-out;
}

It should looks like the two Flipcard, just with a hover effect and scalable font. it would be perfect if there was a button on the hover.

Is this possible?

Thanks for you support :slight_smile:

#5

Hi there,

Thanks for writing in.

Yes, they are flip card and that CSS isn’t related to flip card. Would you mind providing more details of what you wish to do? I think it’s not possible since the image in flip card is not the same as standard image.

Thanks.

#6

Hi Rad,

The flipcards are for improvisation only!

The bottom two pictures, should look like the flipcard on the top.
The Images should have a hover with Transparent colour, scalable font (responsive) and a button.
Is this possible?

Thanks a lot :slight_smile:

#7

Hello There,

I went ahead and duplicated your row with the columns along with the images. In the column, I added a custom class overlay and I inserted this css in the custom css section (http://prntscr.com/gq6w66):

.overlay {
  position: relative;
}

.overlay:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(47, 99%, 51%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.overlay:hover:before {
  opacity: 0.35;
}

Please check your site now.

#8

Hey RueNel,

Perfekt! It works wonderfully :slight_smile:

The second step would be the text in the hover:

  1. Each card has its own text inside (Should i create two classes?)
  2. How can I change the font size?
  3. How can i set the alignment of the text?
  4. How do i make the text responsive?
  5. How to link the column to another page?

thank you in advance

#9

Hello There,

Thanks for updating in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

We can only guide you in minor cosmetic changes regarding the columns and image overlays. Creating a complete new element with special effects like displaying text upon hover is beyond our support. This can be added a feature request instead.

Meanwhile, to create what you have in mind, please try out TheGrid Plugin or Essential Plugin. You can install it in X > Overview > Extensions. Here are some examples:


Thank you for your understanding.

1 Like
#10

I try it by my self and found out how it works. I used the Plugin Essential. Exectlly what I am looking for. Thanks a lot!

#11

You’re most welcome. :slight_smile: