-
Posts
-
I’m wondering if there would be a way to get an image to appear only upon hover on these three grid rows by using some quick css. I want the section to look the way it does currently and have an custom background image appear only on hover. Would this be possible to do? I’m looking for it to work like this site. http://kramerevents.com I haven’t added any custom background images yet. Thanks in advance!
Hi djshortkut!
You could try assign a custom class for the elements and then use the
http://www.w3schools.com/cssref/sel_hover.asp:hover selector, where a background can be applied.
Let us know if that works out for you, as you need it to.
Cheers!
BasilisThank you Basilis but I’m going to need more help than that. I created a home test page to try this on before I put it live on my site to make sure I get it working correctly. I added a custom background image in the first grid row and added a custom css class to that grid row of custom-background-image
Can you provide me with some quick css so that the background image in this grid row only appears on upon hover please? Thank you!
Hey!
Add this to a codeblock element in the page content.
<style type = "text/css"> #av-layout-grid-1 > div:first-child { background: white !important; } #av-layout-grid-1 > div:first-child:hover { background: url("URL to your image") !important; } </style>Regards,
ElliottThank you so much Elliott! The code you provided worked but I need some more help. Almost there! (See Image)
1. Can you provide me code so I can add a background image on hover in each of the three grid row cells.
2. I need to make the background image that I used “stretch to fit” so the entire image is visible upon hover. Right now it’s not adjusting correctly and doesn’t look good.
3. Make the text block color of each section black on hover only because it’s difficult to read right now with the current text color over the background image.Hey!
You can target each grid cell like so.
#av-layout-grid-1 > div:first-child { background: white !important; } #av-layout-grid-1 > div:first-child:hover { background: url("URL to your image") !important; } #av-layout-grid-1 > div:nth-child(2) { background: white !important; } #av-layout-grid-1 > div:nth-child(2):hover { background: url("URL to your image") !important; } #av-layout-grid-1 > div:nth-child(3) { background: white !important; } #av-layout-grid-1 > div:nth-child(3):hover { background: url("URL to your image") !important; }Cheers!
ElliottThanks Elliott! I was able to target each grid cell with this code. I only need help on two more items to get things looking how I want them to:
1. How can I make the background repeat for each background image in the grid rows “stretch to fit” so the entire image is visible upon hover for each grid cell. Right now the image does not fit correctly in each cell and I want it to stretch to fit on any screen size.
2. How can I make the text block color for each section black on hover only because it’s difficult to read right now with the current text color over the background image.I have attached an image that shows how I’m trying to get each section of the grid row to look if that helps.
Thanks!
Hey!
Thanks for the screenshots.
1. The images seem to fit the grids . however I have added background image stretch to fit css property in below code.
2. I have added the required css for this if it don’t work please provide us with the login details in a private message so we can make the changes for you.#av-layout-grid-1 > div:first-child { background: white !important; } #av-layout-grid-1 > div:first-child:hover { color:#fff; background: #000 url("URL to your image") !important; background-size: cover!important; } #av-layout-grid-1 > div:nth-child(2) { background: white !important; } #av-layout-grid-1 > div:nth-child(2):hover { color:#fff; background: #000 url("URL to your image") !important; background-size: cover!important; } #av-layout-grid-1 > div:nth-child(3) { background: white !important; } #av-layout-grid-1 > div:nth-child(3):hover { color:#fff; background: #000 url("URL to your image") !important; background-size: cover!important; }Cheers!
VinayHey!
1.) Here you go:
#av-layout-grid-1 > div:first-child:hover { background-size: 100% 100% !important; background-position: 0px 0px !important; background-repeat: no-repeat !important; }Adjust it as needed.
2.) Use this code:
.avia_textblock p span:hover { color: black !important; }Regards,
AndyThanks Andy & Vinay! Everything is working great except for a few more things:
1. The code for the hovering of the text block to make the text black works except you actually have to hover the text with this code (which is how the code is I suppose). What I am trying to do is have the same effect but have the color of the text change to black when somebody hovers the section i.e. the background image. How can I make it work like this?
2. Would there be a way to make the background images slightly fade in on hover instead of just appearing so it is not as abrupt?Thank you!
Hello,
I started a topic on image hovers a few weeks back but i’m going to include it again in this thread because it relates. I feel that the complexities of the request above exceeds that of which I asked here: https://kriesi.at/support/topic/custom-image-hover/
I’ll explain it again:
When you have an image you have the ability to set an opacity hover. I was wondering if this opacity hover can be replaced with a png hover using quick CSS and target it with a custom CSS class.
The hover png would look something like this:
I am only asking for quick CSS to retrieve the png, I think I may have been misunderstood perviously.
Thank you!
Hey digitalammo! Please create a new ticket so these issues wont get mixed up and we will help you with it. Thanks!
djshortkut it so happened that Andy and me replied to you at the same time so there might be a bit of a conflict in the code. Please remove andy’s code and use the one i provided.
Regards,
VinayThanks Vinay! Yes, I have input your code into separate code blocks on the page. Everything works great except the text block color still isn’t working.
What I am trying to accomplish is that when you hover over the grid section, the background image appears on hover and the color of the text block changes to black. The code that Andy supplied for the text block hover works but you need to actually hover over the actual text which I don’t want, I want it to change simply when you hover over that section. Hopefully that makes sense.
In case you need to take a closer look, I provided temporary login credentials below.
Hi!
As per your request the changes have been updated. The text now becomes black upon hover over the grid block.
Best regards,
Vinay
- The topic ‘Grid Row Custom Background Image Hover’ is closed to new replies.