Hi,
is it possible to have the effect color hover image in flex block 2?
Is it possible make a color appear above the image as the mouse hover, like the effect of the text that is colored when hover with the mouse?
That’s my site: igizmo.it
Thanks for your time and help!
Hi,
There is an option to set a color overlay for the flex module images
– https://www.screencast.com/t/xQ8QzghEt3
That will be always on when set. To achieve the same but on hover you could use some CSS. Like this for example – https://www.screencast.com/t/vB7qpmK2zfL
When the module is hovered a gradient color will appear over it, you can modify the colors and values as needed, this is the code used in the example
– https://pastebin.com/MEq8gB8h
If I misunderstood what you are referring to, please correct me.
Thanks
Hi,
is work with your example code with a little modify
.td_flex_block_2 .td_module_flex_2 a:hover:after{
/*content: ”;*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(196,95,10,0.9);
}
Thank you!
Now it works at middle of what I wanted to get and the solution with span:hover:after does not work. Work with a:hover:after (but it’s no great the result)
What I would like to achieve is an color effect on image like on cnet.com site
It’s possible?
Thanks for your help!
Like this seems to work better – http://prntscr.com/lfrzhk
.td_flex_block_2 .td_module_flex_2 .td-module-container:hover:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(196,95,10,0.9);
}
You could now add a transition to this code, I believe that is how the website you mention does it. Here is a guide
– https://css-tricks.com/almanac/properties/t/transition/
Thank you very much and I think this is already excellent as a result. What I would like to achieve is the double effect: that is that you color the whole image at the passage of the mouse as from your last code, but at the same time the text remains in the foreground white.
Many thanks for your help
That code seems to not work as I thought, it also causes the module to be impossible to click on.
I tried some other codes, seems to be quite difficult to do something like this. Maybe you can experiment more with these examples and achieve the result you want.
Thanks for your help. I will do other experiments starting from your suggestion.
Have a nice day.
Hi,
I saw that the functionality I was asking for on Flex Block 2 was implemented in Big Grid Flex 7 (General module overlay hover color). Great! Will it be extended to the other “Flex” elements in the future?
Thank you
Hi,
That is now available for all flex grids, but not for flex blocks. maybe it will be added for them as well in the future, can’t say for sure what will happen.
Thanks
