-
Posts
-
You helped me add a custom hover over the grid row section beneath my slider which is working great. I want to add a fade in effect so that when the grid row is hovered over, the image slowly fades in instead of appearing immediately and so abruptly. Here is an example of what I am talking about from another website. http://themes.dfd.name/sunday/sixth/
I tried increasing the values of transition: all 1.5s ease; but it does not make any difference. Can you please provide with some quick css to accomplish this please? The code block I have for each section is below. Thank you!
<style type = "text/css"> #av-layout-grid-1 > div:first-child { background: #f9f9f9 !important; } #av-layout-grid-1 > div:first-child:hover { transition: all 1.5s ease; background: #f9f9f9 url("URL to your image") !important; background-size: cover!important; opacity: 1; } #av-layout-grid-1 > div:first-child:hover p { color:#000!important; } </style>Hey djshortkut!
The example site uses an additional div to mask the image and then on hover fades that addition div.
Where as on your site the background image loads from a css class on hover. So when the mouse is taken off the hover state is off and it suddenly disappear as transition is not supported in CSS. To make it similar to the example site the current html structure on your site will not support it. We have to code this from scratch let us know your login details if it is not too much of customization work we will surely help you with this.Best regards,
VinayHere are my login credentials. If you can take a look that would be great and let me know if it would be possible to get these hover images to fade in and out.
I was also thinking as an option that maybe there is a way to code this section to use the animation feature that is available in the column elements since it is already part of the theme. I noticed there is a fade in option (See Image). Don’t know if that would help though, let me know. Thanks Vinay!
Hey!
Please check the test home page. feel free to edit the background images on the 1/3 grid items and adjust the opacity in quick css.
You will notice
background:rgba(248,248,248,.75);
the last decimal number .75 is the opacity amount out of 0 to .100. Where 100 means fully visible.Cheets
Regards,
VinayThank you so much Vinay, you’re amazing! Three small things I want to change and I can’t seem to figure out how with the quick css you input:
1. As you can see on the link below on my current live homepage each of the initial color backgrounds for the grid rows are different colors. The first and third grid row backgrounds are set to color #f9f9f9 and the middle grid row background is set to #f2f2f2 You set the current background correctly to #f9f9f9 I assume I have to target the center section and add the code modified slightly but can’t figure out how to do so. How can I change the center grid row to make the background #f2f2f2? (See Image)
2. Right now there is an animation where these overlays animate from bottom to top when you scroll down on my desktop computer. How can I make it so this doesn’t happen and they are already over the section when you scroll down? Doesn’t seem to be an issue on mobile devices.
3. The overlay section isn’t covering the images completely on my iPad in portrait mode (See Image)
Thanks again!
Hi!
1. Changed the bg color for the middle.
2. To edit animation click on Edit icon on the 1/1 layout grid and select none or any other effect you like.
3. This requires exactly equal amount of text in the paragraph section. However now we are using a pseudo element hack to cover the bottom but the background will show when you hover over it. To make it work absolutely perfectly everywhere it will take a lot of customization if you like to give it a try check search for “css equal height columns ”
Best regards,
VinayHey Vinay, I can’t thank you enough for all of the help! Everything looks amazing and is working great and almost ready to be put live on my site. Just one small question:
2. I turned the animation off. So for the animation, there is no way to have the special heading, separator, text, and button fade bottom to top but have the overlay not animate? So the special that entire section animates bottom to top like my current homepage without effecting the overlay?
Ok I will just turn the animation off then.
One more issue I noticed…the buttons at the bottom of each section are no longer working. They used to hover and be links to other pages and now they do not work at all. They are supposed to work like they do on the current homepage with a hover effect and a link to other pages. Can you please help me fix these and then everything will be working perfectly. These are the buttons that read “Find Out More”
This appears to be just happening on my desktop computer. It appears that the buttons are clickable and hoverable on my iPhone and iPad. It seems to be caused by the code below because if I remove the bottom 2 lines the buttons work fine. Is there any reason why I need these 2 lines as part of the code for this section or can I remove them? Everything seems to be working fine when I remove them but just wanted to check. Thanks in advance!
.imageHoverFade:hover p{ color:#000!important; position:relative; z-index:999; }Hi!
The code you pasted is used to change the paragraph text color on hover. If you do not notice a big difference and like the way it looks without that code please feel free to remove it.
I think you already figured out the other issues as everything looks and works fine please let us know if you have any other questions we are happy to help you :)
Best regards,
Vinay
- The topic ‘Custom Image Hover Fade In Effect’ is closed to new replies.