Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 16, 2019 at 11:02 pm #1138964
    i9design

    Hi, I’m trying to have a transparent orange colour overlay on my linked images for the hover state. On one I was able to get the colour but it’s not transparent. It’s as if the colour overlays on white instead of the photo on hover. Can you help me figure out how I can do that?

    September 18, 2019 at 8:51 pm #1139694
    Mike

    Hey i9design,
    Thank you for the link to your site, I wrote this css for the image above your to demonstrate, the class for the image is: .orange_hover

    .orange_hover:hover:before {
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  visibility: visible !important; 
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(212, 118, 10, 0.5) !important; 
}

    I felt this looks better when the opacity is removed, so try testing with this also:

    body .flex_column.avia-link-column.avia-link-column-hover:hover {
    opacity: 1 !important; 
}

    Best regards,
    Mike

    September 19, 2019 at 8:54 pm #1140034
    i9design

    Awesome thank you Mike! This works perfectly and I like your suggestion better as well.

    Is there a way to have the text be on top of the overlay?

    September 20, 2019 at 6:10 am #1140115
    Mike

    Hi,
    Glad to hear, to have the text on top please try adding this css:

    .orange_hover:hover h1 {
	z-index: 50;
	position: relative;
}

    Best regards,
    Mike

    September 20, 2019 at 6:23 pm #1140298
    i9design

    Thank you for your help. Works great!

    September 20, 2019 at 8:55 pm #1140336
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Transparent colour overlay on hover’ is closed to new replies.