Hi Everyone,
I use a Raster for my content. In one Raster I have a background image. I would love to add to that image some mouseover effects.
Great would be zoom-in and an 50% white overlay.
Is that possible? Would be great if someone can help me with that.
Thanks a lot.
Hi BR-Fotodesign,
I believe that’s possible however, I’m not sure what you meant by “Raster”? can you give us a screenshot for that? maybe can provide some CSS code that might help achieve what you want.
Best regards,
Nikko
Hi Nikko,
thank you for your reply.
“Raster” ist just der german word for “cell” or “column”… Sorry about that.
This is the Website I am working on:
My problem is on the “HOME” Page. When you scroll down you will see some cells with big background images. They are linked to a page. I used the standard hover effect which makes a little white overlay.
I would love to have less opacity on that and also a little zoom-in effect.
I tried several css styles, but none of them worked satisfying for me.
Would be great if you can provide me with some CSS in that.
Thanks a lot,
Bettina
Hi Bettina,
I have tried it with CSS and this is the best one I could come up (though it has some glitch), you can try this one and maybe you can tweak it to something better:
#top .av-layout-grid-container {
overflow: hidden;
}
#top .flex_cell.avia-link-column {
transition: transform 0.7s ease, opacity 0.7s ease;
position: relative;
z-index: 1;
}
#top .flex_cell.avia-link-column.avia-link-column-hover:hover {
opacity: 0.9;
transform: scale(1.05);
z-index: 0;
}
I tried background-size and background-position and even zoom but there’s no animation.
Best regards,
Nikko
Hi Nikko,
thank you so much.
I think it´s the best solution I can get.
Thanks a lot,
Bettina
Hi Bettina,
We’re glad to hear that :)
Thanks for using Enfold and have a great day!
Best regards,
Nikko