Jump to content

Second image on hover for Squarespace 7.1

Recommended Posts

Site URL: https://www.artisaneyeworks.com/dr-kimberly-hoyt

I want to have a second image revealed on hover, and found the code below to make this happen. I've found that it does swap the images on hover, but the second image scales to a smaller size. I'd like it to fill the same foot print as the first image. Any suggestions?

 

<p>
<style>
img.normal {
  width: 90%;
}
</style>
  <div class="image-swap">
  <img class="normal" src="https://static1.squarespace.com/static/602c181598bd112424ba15a3/t/60789706cc385b4d98096b7e/1618515718253/dr_kimberly_hoyt_3x2.jpg">
  
  <img  class="normal" src="https://static1.squarespace.com/static/602c181598bd112424ba15a3/t/60789c9b6bfac2330ee3af5a/1618517148091/dr_kimberly_hoyt_3x2_02.jpg">
    
    </div>

</p>

Link to comment
  • Replies 7
  • Views 656
  • Created
  • Last Reply

Tuanphan, I tried the steps outlined in the guide you recommended, and was not successful. Attached are screenshots of my steps. Please let me know if I made any mistakes or if you have any recommendations.

Thanks!

Screen Shot 2021-05-31 at 12.07.02 PM.png

Screen Shot 2021-05-31 at 12.08.26 PM.png

Screen Shot 2021-05-31 at 12.13.23 PM.png

Link to comment
19 hours ago, mark6 said:

I just realized I didn't give you the URL for the page.

fetchpdx.squarespace.com/hover-effect

The image url doesn't exist. Can you check it again?

https://fetchpdx.com.squarespace/s/onigiri_02.png

image.thumb.png.68615cd77e7e60ce29273b982a156497.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 6/2/2021 at 12:08 PM, mark6 said:

Thanks for all your help! I realize where I made mistakes.

Do you need support with these?

Site URL: https://www.artisaneyeworks.com/

1. (Mobile-Homepage) Reduce icon size?

artisaneyeworks.com-01-min.png

2. (Tablet-Footer) Align 3 lines?

artisaneyeworks.com-02-min.png

3. (Tablet/Mobile-Overlay Menu) Change logo color?

artisaneyeworks.com-03-min.png

4. (Mobile-Our Staff) Move image to top of text?

artisaneyeworks.com-04-min.png

5. (Tablet-Our Optometry Services) Increase width a bit?

artisaneyeworks.com-05-min.png

6. (Tablet-Blog Posts) Increase width?

artisaneyeworks.com-06-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.