Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
bshoop

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

Question

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.

Edited by bshoop

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 3

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.

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 0

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.

Edited by bshoop
Tidy

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...