Image Border Appear Upon Hover

by wiseworks

Posted: 10 years ago 13 replies

PROGRAMMING

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;
}

#border #hover #image

second2none 10 years ago

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?
- Thanks
- 1 reply
{{ DiscussionBoard.errors[9071472].message }}
- wiseworks 10 years ago
  
  Originally Posted by second2none
  
  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?
  
  Either or. I've looked at the W3 pages and they just aren't clear enough for me.
  
  Thanks
  
  Signature
  
  Jeff Wise
  Online marketing consulting with the real Jeff Wise
  
  Btw, here is an affordable and quality keyword research tool.
  
  {{ DiscussionBoard.errors[9071577].message }}
K Meier 10 years ago
Add this to your css:
Code:

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

Edit fiddle - JSFiddle
- Thanks
- 1 reply
{{ DiscussionBoard.errors[9074766].message }}
- wiseworks 10 years ago
  
  Originally Posted by K Meier
  
  Add this to your css:
  
  Code:
  
  img.related-list:hover { border: 1px solid red; }
  
  This will give it a red border.
  
  Edit fiddle - JSFiddle
  
  For some reason that didn't work. I added it to the bottom of the code you see here at the top.
  
  Thanks
  
  1 reply
  
  Signature
  
  Jeff Wise
  Online marketing consulting with the real Jeff Wise
  
  Btw, here is an affordable and quality keyword research tool.
  
  {{ DiscussionBoard.errors[9075661].message }}
  
  wiseworks 10 years ago
  
  Any other ideas on how to make this work?
  
  Thanks
  
  1 reply
  
  Signature
  
  Jeff Wise
  Online marketing consulting with the real Jeff Wise
  
  Btw, here is an affordable and quality keyword research tool.
  
  {{ DiscussionBoard.errors[9088388].message }}
  
  shaughan 10 years ago
  
  URL for a look? hover will only work on an encapsulated image (div,href,whatever).
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[9088430].message }}
  
  wiseworks 10 years ago
  
  Originally Posted by shaughan
  
  URL for a look? hover will only work on an encapsulated image (div,href,whatever).
  
  Let's use this one as an example.
  
  Proper Path Of The Baseball Swing
  
  Thanks
  
  1 reply
  
  Signature
  
  Jeff Wise
  Online marketing consulting with the real Jeff Wise
  
  Btw, here is an affordable and quality keyword research tool.
  
  {{ DiscussionBoard.errors[9088547].message }}
  
  aesoft 10 years ago
  
  Originally Posted by wiseworks
  
  Let's use this one as an example.
  
  Proper Path Of The Baseball Swing
  
  Have you tried using javascript for this yet?
  Perhaps something like...
  
  The portion within the '< script >' tags can be placed with your other javascript:
  
  Code:
  
  <script type="text/javascript"> function setBorder(e){ // Add border - Border CSS goes here e.style.border = "solid 1px #000"; } function removeBorder(e){ // Remove border e.style.border = "0"; } </script>
  
  Then place this within the 'img' tag itself:
  
  Code:
  
  onmouseover="setBorder(this)" onmouseout="removeBorder(this)"
  
  which would end up making your image source looking along the lines of...
  
  Code:
  
  <img src="THE_IMAGE_URL" onmouseover="setBorder(this)" onmouseout="removeBorder(this) />
  
  I would think something like this would work for you.
  
  Hope it helps.
  
  Note: This can actually be completed a little easier with jQuery, but wanted to provide a solution not dependent on any other scripts.
  
  Thanks
  
  {{ DiscussionBoard.errors[9091492].message }}
bawany 10 years ago

.related-list img:hover {
border: 2px solid #000;
}

Try this
- Thanks
- 1 reply
Signature

World Web is switching to Smartphones, IS YOUR WEBSITE RESPONSIVE AND READY FOR IT?

UPDATE YOUR WEBSITE, GET RESPONSIVE NOW!
{{ DiscussionBoard.errors[9091827].message }}
- wiseworks 10 years ago
  
  Originally Posted by bawany
  
  .related-list img:hover {
  border: 2px solid #000;
  }
  
  Try this
  
  Thank you so much! It's sorta working now.
  
  The only problem is that when you hover the screen jumps. How can we fix that?
  
  The Perfect Baseball Swing Should Be a Consistent One
  
  Thanks
  
  1 reply
  
  Signature
  
  Jeff Wise
  Online marketing consulting with the real Jeff Wise
  
  Btw, here is an affordable and quality keyword research tool.
  
  {{ DiscussionBoard.errors[9093109].message }}
  
  wiseworks 10 years ago
  
  Is there a way to avoid the "jump" while hovering? Here is the code.
  
  /************ 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;
  display: block;
  margin: 0 auto;
  padding: 5px;
  }
  
  .related-list img:hover {
  border: 2px solid #2B5D6C;
  }
  
  Here is the page.
  
  Baseball Tips For Kids - Walks, Runs, and Never Giving Up
  
  Thanks
  
  1 reply
  
  Signature
  
  Jeff Wise
  Online marketing consulting with the real Jeff Wise
  
  Btw, here is an affordable and quality keyword research tool.
  
  {{ DiscussionBoard.errors[9107581].message }}
  
  wiseworks 10 years ago
  
  Wait! Is this the fix???
  
  Under the hover property I changed it from "border" to "outline". Is that the best way?
  
  Thanks
  
  1 reply
  
  Signature
  
  Jeff Wise
  Online marketing consulting with the real Jeff Wise
  
  Btw, here is an affordable and quality keyword research tool.
  
  {{ DiscussionBoard.errors[9107632].message }}
  
  tutu8 10 years ago
  
  try this:
  
  .related-list img {
  border: 2px solid #fff;
  }
  .related-list img:hover {
  border: 2px solid #000;
  }
  
  Originally Posted by wiseworks
  
  Wait! Is this the fix???
  
  Under the hover property I changed it from "border" to "outline". Is that the best way?
  
  Thanks
  
  {{ DiscussionBoard.errors[9109442].message }}

Image Border Appear Upon Hover

Trending Topics

A Very Strange Internet Problem

Boat and Jet Ski Rentals...... Door Hangers Effective?

Let's dissect the genius behind Nike's 'Just Do It' slogan. What makes it so powerful and timeless?

Are billboards still effective in driving customers?

Google Ads, landing pages, and Clickbank links