Help with resizing image for a rollover.

  • 1
  • Question
  • Updated 5 years ago
Hi all,
I am using the following snippet of css code -below, to make a before and after mouseover effect on a photo. But I was wondering how I can make the size of the image to include the whole image, at the moment it shows only half the image . I want to use this on a few different photos so I don't really want to have to resize all the images.

Many thanks in advance for any help :)

a#info {background-image:url(image1.jpg);width:200px;height:300px;display:block;}
a#info:hover {background-image:url(image2.jpg);}

Hover the mouse over the image to view restoration


Photo of pixelshaw

pixelshaw

  • 27 Posts
  • 1 Reply Like
  • undecided

Posted 8 years ago

  • 1
Photo of pixelshaw

pixelshaw

  • 27 Posts
  • 1 Reply Like
The full code isn't showing in the question. Not sure how to make it show???
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
What is your website's URL? So I can see the Image Rollover. Also, here is a corrected code:

a#info {
background-image: url('resources/YOURIMAGE1.jpg');
width:200px;
height:300px;
display:block;
}

a#info:hover {
background-image: url('resources/YOURIMAGE2.jpg');
}

Also, make sure you have a id="info" on the object you are applying this to.

I really hope this works! And if it does not please let me know!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--

Also, pixelshaw, do you want this CSS to apply to the object that is in an A tag? Because I see you have "a" before the #div name. Also, did you make sure to put this:

<style type="text/css">

before the CSS and then this:

</style>

after the CSS above? If you did not the CSS code will just appear on the page and it wont render because the browser wont know that it is css.
-->
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Thanks for sharing the full code, Nathan!

Yes, please share your URL so we can take a peak at your site. If you are unable to embed that HTML, please let us know and we will be glad to assist you further.

Cheers!
Photo of localpass

localpass

  • 1 Post
  • 0 Reply Likes
really need to take a look at your site ,so we can know what kind of half image do you have. so when you are resizing images vb.net for a few ,you may know what pixels should we set.