Creating an image rollover on a Landing Page

Occasional Contributor

We are building a Landing Page with pictures of co-workers.

 

We would like to create a rollover so that when the co-worker's image is hovered over, the image changes. Can someone give advice on what css code we would need to make that work?

 

Thanks

-Steven 

Reply
0 Upvotes
2 Replies 2
Highlighted
Regular Advisor | Gold Partner | HubSpot Certified Trainer

@Steven_Regis24 - Here's a codepen example

https://codepen.io/creativeprogrammer/pen/RpBpgm

 

- tim@belch.io

Top Contributor

I know you asked for CSS Code, but here's some html I use for our blog home page using onmouseover and onmouseout that works to do what you're asking.

 

<p><a href="https://blog.pitsco.com/blog/for-the-love-of-popcorn-the-science-behind-the-pop" rel=" noopener" target="_blank"><img src="https://cdn2.hubspot.net/hubfs/2781691/Blog%20Images/Popcorn-Science-600-0319.jpg" onmouseover="this.src='https://cdn2.hubspot.net/hubfs/2781691/Blog%20Images/Popcorn-Science2-600-0319.jpg'" onmouseout="this.src='https://cdn2.hubspot.net/hubfs/2781691/Blog%20Images/Popcorn-Science-600-0319.jpg'" alt="" class="" target="_blank"></a></p>

Reply
0 Upvotes