Jump to content

How do I create an image rollover in the image block?

Recommended Posts

Hi, I have three images on my home page. Right now I have the "display caption on hover" option turned on but I would like to create a rollover state for each image instead. I have the regular images and the rollover images ready to go. I just need the code. Do I need to do any additional code for the rollover image so that it conforms to the same shape and area as the regular image? For example, I have code to remove the padding from the image block for the regular image. Will this remove the padding from the rollover image or is additional code needed for this?

Thank you.

Link to comment
  • Replies 9
  • Views 39.9k
  • Created
  • Last Reply

I found the following code in the forum but it’s not working. Is the problem the note at the bottom? I’m using the Adirondak template.


.form-wrapper input[type=submit] { background-image: url(normalimage); } 
.form-wrapper input[type=submit]:hover { background-image: url(otherimage); }

Note: For templates other than Jensen, you may need to alter the “.form-wrapper” selector. Use your browser’s DOM inspector to figure this out.

Link to comment
  • 4 months later...

I think I might have your answer, hopefully you've found a solution since it's been several months, but this might help you and other users with the same question.

I did a web search for "code to create a hover-image" and this site came up:

http://helplogger.blogspot.com/2012/05/create-rollover-image-effect-change.html

I inserted a code block where I wanted the image, and then typed in the code. I didn't need any additional code, the block took on the shape of my image. It worked perfectly for me, hopefully it will help you as well.

Link to comment
  • 1 year later...

CocaCola_zpsdx4zkbyg.png

Here's an example of the code I used for a client's site. Remember to be extremely careful when switching out your links. Clicking on the link sent you to the coca-cola page, so if you don't want your image to link, just replace the address with a #.

*Side note- Easiest way to make this work is to not upload the actual image to squarespace since it's so annoying to find the actual link for images later on.

Cheers

Link to comment
  • 8 months later...

Hi I think you are looking for this image hover. It will be moving to another image when you move over it. This is so useful for whom want to play with image mode. Let's see this link below;http://www.blogsupporter.com/2015/10/create-change-image-when-you-put.htmlIf it is not I will give you the another code.

My name is Brian Keo, I am a gentle man and I became a blogger since late of 2012. I am very friendly Wordpress Platform at the first time. Actually, I do not have any background about blog development, website designer and granted from Information Technology. But I really like searching about how to be a good web developer and blogger. I have decided to use Wordpress Platform since 2012 and I researched a lot about it and I also succeed with Wordpress Platform and I became a Wordpress Website Developer for my business and my friends. In late of 2015 I have decided to build up with Blogger, due my background from Wordpress Platform, I think Blogger is more comfortable with myself and I am really love it because it is a most familiar with myself as well. And I have decided to build up a blog with Blogger platform to be promoted with myself become a blog developer. My blog is called [**Blog Tutorial Supporter**][1], it is a blogger and Wordpress Supporter, and provide you within blogger tips, worpdress tips, and blogger and wordpress template, plugins and CSS, HTML, SEO guidance, provide css, thml, jQuery tickers, personal blog developer, make money online, adsense guidance, wordpress tutorial, blogger tutorial. If you need any assistance please visit the website and you will found many guidance and tutorials. I do believe that you will be enjoy with those works from my sharing on my blog and it could be a key to help you too develop your personal blog. You can join with this blog through subscribe for free update and every new update will send direct to your email inbox. Otherwise, you can join me via social media such as like our Facebook Page, Follow on Twitter, Follow on Google Plus etc. [1]: http://www.blogsupporter.com

Link to comment
  • 2 months later...

Hello Everyone! I put together a comprehensive guide on how add hover effects to your images

We cover:

  • Fade Effect
  • Grow Effect
  • Invert Colors Effect

Check it out here

Hi, my name is Forrest. I am a founding member of [Pareto Design][1]. Addicted to progress, designing better democracy with tech, & driving youth demand for electric vehicles http://goo.gl/hK1WGZ [1]: http://pareto-design.com

Link to comment
  • 3 weeks later...
  • 4 years later...
3 hours ago, EmilyWeaver123 said:

Hi! Im trying to make an individual image change color on hover. What am i doing wrong?

.image-block img #yui_3_17_2_1_1617224065128_12728 {
transition: .5s ease-in-out;
filter: grayscale(1);
}
.imgage-block img#yui_3_17_2_1_1617224065128_12728:hover {
filter: none;

}

You use incorrect css selector, try this


#block-3edeabcf2f31a3d494a5.image-block img {
transition: .5s ease-in-out;
filter: grayscale(1);
}
#block-3edeabcf2f31a3d494a5.image-block:hover img  {
filter: none;

}

#block-3edeabcf2f31a3d494a5 is unique id of the block, find yours using this tool

Squarespace ID Finder - Chrome Web Store (google.com)

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. 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.