Border around image with link

  • Resolved Mirko01

    (@mirko01)


    11 years, 10 months ago

    Hi.
    I’d like to get a border around image with link.
    Current solution is reduced opacity, but I don’t like it. It isn’t noticeable enough. This is in my style.css:
    a { color: #ff8000; text-decoration: none; }
    a:visited { color: #ff8000; }
    a:hover { color: #0000ff; text-decoration: underline; }
    a img:hover { opacity: 0.5; }

    I’ve tried also to reduce opacity for all images to 0.7 with:
    a img { opacity: 0.7; }
    and then enlarge opacity to 1 with:
    a img:hover { opacity: 1;}
    but images were too pale. Now I’d like to try with border around image. I’ve tried with:
    a img:hover { img-border: 1;}
    but it didn’t work. Can you, please, help me.
    Oh, my site is: http://www.tangens.si/
    My theme is Tranquility White Child

    Kind Regards, Mirko

Viewing 7 replies - 1 through 7 (of 7 total)
  • Somegirlwitha.com

    (@beejers)

    11 years, 10 months ago

    Can you try this?

    a:link img {border: 1px solid #036;}

    linux4me2

    (@linux4me2)

    11 years, 10 months ago

    I think he’s just wanting the effect on hover, so it would be:

    a img:hover {border: 1px solid #036;}

    esmi

    (@esmi)

    11 years, 10 months ago

    What theme are you using? Where did you download it from?

    Thread Starter Mirko01

    (@mirko01)

    11 years, 10 months ago

    @esmi
    Tranquility White is an old theme from WordPress 2007. I have modified it. Home.php is a static HTML page, not part of the original WordPress theme.

    @ linux4me2
    You are right. I’ll try. Thank you.

    @ Somegirlwitha.com
    Thanks for your effort anyway.

    Enjoy,
    Mirko

    Thread Starter Mirko01

    (@mirko01)

    11 years, 10 months ago

    @ linux4me2

    Your solution works in Sidebar: http://www.tangens.si/mentorstvo-za-mlade/
    and it works in Footer (Click on WordPress logo at bottom),
    but it doesn’t work in home.php: http://www.tangens.si
    and it doesn’t work in body.php: http://www.tangens.si/mentorstvo-za-mlade/

    Would you be so kind and check my style.css?
    You can contact me through [email address moderated – these forums do not provide support via email]

    Hi everyone,
    Mirko

    linux4me2

    (@linux4me2)

    11 years, 10 months ago

    For the home page, it’s because you have this on line 133 of your style.css:

    #home .noborder:hover {
  border: 0 solid transparent;
}

    Then for the body, on line 146, you have:

    #content img {
    border: 0 none;
}

    You could try putting your new CSS below that or add the “!important” to it so it won’t be overridden by the CSS that comes later in the file; however, since those lines are more specific than the generic declaration you added, it would be better to change the first entry to include your settings for the hover, and to add an entry for the content hover:

    #content a img:hover {
  border: 1px solid #036;
}

    Thread Starter Mirko01

    (@mirko01)

    11 years, 10 months ago

    Wow. You’ve opened my eyes.
    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Border around image with link’ is closed to new replies.