Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • December 28, 2015 at 8:34 pm #557831
    djshortkut

    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!

    December 28, 2015 at 9:01 pm #557840
    Basilis

    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!
    Basilis

    December 28, 2015 at 10:24 pm #557863
    djshortkut

    Thank 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!

    January 3, 2016 at 2:28 am #558899
    Elliott

    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,
    Elliott

    January 4, 2016 at 2:00 am #558936
    djshortkut

    Thank 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.

    January 4, 2016 at 4:39 am #558987
    Elliott

    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!
    Elliott

    January 4, 2016 at 5:20 am #559010
    djshortkut

    Thanks 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!

    • This reply was modified 8 years, 11 months ago by djshortkut.
    January 4, 2016 at 8:55 pm #559461
    Vinay

    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!
    Vinay

    January 4, 2016 at 9:02 pm #559465
    Andy

    Hey!

    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,
    Andy

    January 4, 2016 at 10:48 pm #559549
    djshortkut

    Thanks 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!

    January 5, 2016 at 4:40 am #559730
    bobfurgo

    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:

    iamgehover

    I am only asking for quick CSS to retrieve the png, I think I may have been misunderstood perviously.

    Thank you!

    January 6, 2016 at 11:24 am #560412
    Vinay

    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,
    Vinay

    January 6, 2016 at 10:01 pm #560783
    djshortkut

    Thanks 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.

    January 7, 2016 at 1:12 am #560867
    Vinay

    Hi!

    As per your request the changes have been updated. The text now becomes black upon hover over the grid block.

    Best regards,
    Vinay

    January 7, 2016 at 1:39 am #560877
    djshortkut

    Awesome, thank you so much Vinay! One more question…Is it possible to have the hover background image “fade in” a little slower instead of appearing so abruptly on hover?

    • This reply was modified 8 years, 11 months ago by djshortkut.
    January 7, 2016 at 7:59 am #561037
    Vinay

    Hey!

    hey did you change the password i am unable to login.

    Cheers!
    Vinay

    January 7, 2016 at 8:09 am #561041
    djshortkut

    Sorry, try again

    January 7, 2016 at 8:58 am #561056
    Vinay

    Hi!

    as per your request a smooth transition effect is added.

    Regards,
    Vinay

    January 7, 2016 at 8:35 pm #561484
    djshortkut

    Thank you so much Vinay, I really appreciate it! You can close this thread.

    January 7, 2016 at 10:23 pm #561558
    Vinay

    Hi!

    I’m glad we were able to help you sir :)
    Thank you for using Enfold.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Grid Row Custom Background Image Hover’ is closed to new replies.