Change color on image hoover and add text

[wildfire87]

I have a few classic images and I would like to have the same hoover effect as on the THEMECO website.
that is shown here in the Essets section: https://theme.co/pro?gclid=Cj0KCQjw4cOEBhDMARIsAA3XDRg14h4XiPI0ceT5A1JG9GGLJAvxFASU1RasjuDurD1Me_o2Gp7thnIaAq-OEALw_wcB

Below I have shown an example created in Photoshop of my portfolio page.

So basicly I need to know two things:

1. How do I change the hoover color of a Classic image elements?
2. How to add text for the classic image element.

I’ve tried looking on the forum to change the color, but nothing seemed to work.

Can you please help out?

[tristup]

Hi @wildfire87,

Thanks for reaching out.
What you are trying to do, is not possible through the Classic Image or Image element. But can be achieved by using the custom CSS code and the following thread can be helpful on this.

PNG image hover change

Hi Steffen, This is possible through custom CSS. First, add a class to the image element then add this code to the Global CSS: [image] [image] .grayscale { transition: filter 0.45s cubic-bezier(0.3, 0.4, 0.1, 1), opacity 0.45s cubic-bezier(0.3, 0.4, 0.1, 1); -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.55; } .grayscale:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); opacity: 1; } To apply this style to other images, just add…

Image hover overlay with CSS?

Hi there, Yes you can achieve this through some CSS. First, please add a class to the images. You can do this when you click on the customize option of the image element. [image] Once you added a class to the image, please add this code in the Global CSS assuming that the class you added to the image elements is with-overlay: .with-overlay { position: relative; } .with-overlay:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; …

Please remember that code in the above threads is sample code, and it varies from case to case, and we can’t guarantee it works for you.

Alternatively, you can try using the bundled grid plugins. Both have the features you need. Please visit the links below for more details and plugin usage instructions.

• The Grid: Demos | Bundled Plugin Documentation
• Essential Grid: Demos | Bundled Plugin Documentation

Hope it works for you.
Thanks

[wildfire87]

Thank you for your reply Tristup!
I remember I used the Grid a few years ago. I think this will do the job fine.

Have a nice day.

[tristup]

Hi @wildfire87,

Glad that we are able to help you.

Thanks