change an image (CTA) to another ,when hovered over

  • hi,
    I’ would like to change an image (CTA) to another ,when hovered over…

    The following code i have put in de html in the site;

    <!--This is a comment. Comments are not displayed in the browser-->

  <a href="https://www.tercoma.com/home/gratis-offertecontact/">
   <img src="/wp-content/uploads/2017/09/composiet-offerte1-e1508259046664.jpg" width="212" height="50" alt="composiet-offerte" />
  </a>

<!--This is a comment. Comments are not displayed in the browser-->

And the following CSS code i have put in CSS.

.offerte-composiet {
  width : 212px;
  height : 50px;
}

.offerte-composiet:hover, .offerte-composiet:focus, .offerte-composiet:active {
  background : transparent url(wp-content/uploads/2017/10/offertebasis-e1508261796727.jpg) no-repeat;
}

.offerte-composiet:hover img, .offerte-composiet:focus img, .offerte-composiet:active img  {
  background : transparent;
  visibility : hidden;
}

    Problem: the second image ,which is more red color like , does not appear when hovered over…?

    Does anyone see what i’m doing wrong?

    Thx

    • This topic was modified 7 years, 4 months ago by lieven23.
    • This topic was modified 7 years, 4 months ago by lieven23.
    • This topic was modified 7 years, 4 months ago by Steven Stern (sterndata). Reason: put code in backticks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter lieven23

    (@lieven23)

    <h1>
  <a href="https://www.tercoma.com/home/gratis-offertecontact/">
   <img src="/wp-content/uploads/2017/09/composiet-offerte1-e1508259046664.jpg" width="212" height="50" alt="composiet-offerte" />
  </a>
 </h1>
    Moderator bcworkz

    (@bcworkz)

    You’re using a relative URL in CSS, which is relative to the CSS file, unlike relative URLs in HTML which are relative to the page. /wp-content/uploads/ is invalid relative to your CSS file. Use an absolute URL including //www.tercoma.com/ for CSS file references and it should work fine.

    Thread Starter lieven23

    (@lieven23)

    hi bcworkz,

    Thank you so much for the instructions. It helped. The red image now appears but is shown half and also a little lower than the first one..?

    thx
    Lieven23

    Hi bcworks,

    It seems like the background position is a bit off. To fix this, can you please add the following CSS:
    .offerte-composiet:hover, .offerte-composiet:focus, .offerte-composiet:active {
    background-position: center !important;
    background-repeat: no-repeat !important;
    }

    Please let me know if this helps.

    Kind regards,
    Dylan

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘change an image (CTA) to another ,when hovered over’ is closed to new replies.