Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding a border around images...

    Hi everyone, I was wondering if anyone knew an easy way to add a "Border" around an image in CSS.. the webpage is http://www.brownagencies.com/ (goto portraits / click the image) I got some of the problems resolved by using a table but I wanted a hover command to add in a clearish border.

    Thanks for any help!

  • #2
    New Coder
    Join Date
    Feb 2007
    Location
    Austin
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are talking about a swap image? Basically you want the border to change as you roll over the thumbnail, right? I think the easiest way to accomplish this would be to use the swap image function, you could probly get it to work with an on roll-over and change the border style, but it seems that would be a bit involved for something you could acheive by swapping the image.

  • #3
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was thinking about that, but with the css I cant.. or rather dont want to have to go back through each image.. I just added a border around it and after the hover it removes the border so it gives the same effect.. I just saw on some websites that they have like a hovering border that follows the images, that would be cool

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Border, hover

    You should be able to assign borders to the images in question and alter their appearance from color to transparent with the :hover pseudoclass just fine; something like this:
    Code:
    img {
    border: 2px solid #000;
    }
    
    img:hover {
    border: 2px solid transparent;
    }
    (Do note that IE prior to 7 does not support the :hover pseudoclass on anything but a elements; you'll need an additional trick to get IE<7 to play along).

    Why don't you show us what you've come up with sofar so we can steer you in the right direction?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    New Coder
    Join Date
    Apr 2007
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    img
    {
    border-width:1px
    }

  • #6
    New Coder
    Join Date
    Feb 2007
    Location
    Austin
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can you provide a link to the "hovering border that follows the image" so we can have an idea as to what you are trying to achieve.

    I Think I know what you are going for, but as ronald said, you are going to have a bear of a time getting it to display uniformly across browsers. Now this isn't much of a problem if you know the browser make and version of your visitors, or offer a browser detect and browser download link for those not using the proper browser, but as you can guess this creates its own issues.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •