Image Border Appear Upon Hover

by 13 replies
15
I'm trying to get my related posts image to have border appear only upon hover. How do I do this?

My current style is the following:

/************ Related Posts *************/
.related-posts {
overflow: hidden;
margin: 0 0 10px 20px;
font-size: 13px;
}

.related-list li {
float: left;
list-style-type: none;
margin: 0 10px 0 0;
text-align: center;
width: 185px;
}

.related-list img {
background: none repeat scroll 0 0 #6FA1B1;
border: 2px solid #2B5D6C;
display: block;
margin: 0 auto;
padding: 5px;
}
#programming #border #hover #image
  • CSS :hover Selector

    It's very simple to add hover.Are you looking for a push in the right direction or are you wanting this code amended?
    • [1] reply
    • Either or. I've looked at the W3 pages and they just aren't clear enough for me.
  • Add this to your css:

    Code:
    img.related-list:hover {
    border: 1px solid red;
}
    This will give it a red border.

    Edit fiddle - JSFiddle
    • [1] reply
    • [DELETED]
    • For some reason that didn't work. I added it to the bottom of the code you see here at the top.
      • [1] reply
  • .related-list img:hover {
    border: 2px solid #000;
    }

    Try this
    • [1] reply
Join the discussion

Next Topics on Trending Feed