How can I set a transparent border around an image using CSS?

microphone

I'm trying to create an oval shape on hover when someone hovers over a link. By doing this, I lost the image that was part of the link. I know what I'm doing wrong but what?

.pagelinks {
  float: right;
  margin-right: 48%;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  color: #828282;
}

.pagelinks a {
  text-decoration: none;
  display: inline-block;
  background-repeat: no-repeat;
}

.pagelinks a img:hover {
  border-radius: 3px;
  border: 1px solid #828282;
  padding: 7px;
  width: 1px;
  height: 0.5px;
}
<span class="pagelinks">
  <a href="{1}">
    <img src="../images/integration/FastLeft.jpg"/>
  </a>
  <a href="{2}">
    <img src="../images/integration/SlowLeft.jpg"/>
  </a>
  | Page {5} of {6} |
  <a href="{3}">
    <img src="../images/integration/SlowRight.jpg"/>
  </a>
  <a href="{4}">
  <img src="../images/integration/FastRight.jpg"/>
  </a>
</span>

JSFiddle

hungry star

Like @Michael Cocker said, you set the image size to basically nothing. Don't do this, the padding may be removed. It will move on hover if you need it, so you can add it to the image before hovering.

You mentioned the oval, but there border-radius's one that's 3pxnot a lot, so added an as-needed one. Using will give you a circle 50%if the images have the same height and width, otherwise it will be an oval.

.pagelinks {
  float: right;
  margin-right: 48%;
  color: #828282;
}

.pagelinks a {
  text-decoration: none;
}

.pagelinks img {
  border: 1px solid transparent;
}
.pagelinks img:hover {
  border-radius: 3px;
  border: 1px solid #828282;
}
<span class="pagelinks">
  <a href="{1}">
    <img src="http://placehold.it/30x30/fc0"/>
  </a>
  <a href="{2}">
    <img src="http://placehold.it/30x30/fc0"/>
  </a>
  | Page {5} of {6} |
  <a href="{3}">
    <img src="http://placehold.it/30x30/fc0"/>
  </a>
  <a href="{4}">
    <img src="http://placehold.it/30x30/fc0"/>
  </a>
</span>

Related

How can I set a transparent border around an image using CSS?

microphone I'm trying to create an oval shape on hover when someone hovers over a link. By doing this, I lost the image that was part of the link. I know what I'm doing wrong but what? .pagelinks { float: right; margin-right: 48%; display: inline-block;

How can I set a border around these divs using CSS?

Ben I'm trying to make a progress indicator for a Gantt chart showing actual progress compared to target progress like this: The black bar is the goal and the red bar is the actual progress. The sample code (generated on the fly) is this: <div style='border: 1

How can I set a border around these divs using CSS?

Ben I'm trying to make a progress indicator for a Gantt chart showing actual progress compared to target progress like this: The black bar is the goal and the red bar is the actual progress. The sample code (generated on the fly) is this: <div style='border: 1

How can I draw a border around a translucent image? (css)

not clear I'd like to know how to draw a border around a semi-transparent image, that is, I don't need either a box-shaped border nor a border-radius, but a border that really fits the shape of the image itself. According to this article, this is not possible,

How can I draw a border around a translucent image? (css)

not clear I'd like to know how to draw a border around a semi-transparent image, that is, I don't need either a box-shaped border nor a border-radius, but a border that really fits the shape of the image itself. According to this article, this is not possible,

How can I create a transparent border using CSS in a subclass?

microphone I'm trying to create a transparent border around the page number 1 shown below the image. I created a subclassed span tag so that I can just target the element, but it doesn't seem to work. I found some similar questions saying to create a space in

How can I remove the border around the image?

username How can I remove the border around the square? Exterior: my HTML: <input id="black" type="image" src="html5-canvas-drawing-app/images/color-swatch-brown.png" onClick="changeColorBlack()"> my css: #black{ border:none; outline:none; background:none; pa

How can I put a border around the icon? (HTML/CSS)

tintin islam What is the code for this kind of boundary Sumet Patel Try this Html <div class="wrapper"> <div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div><div id="container_2"><img src="https://cdn1.ic

How can I set the opacity of a background image using CSS?

Nices I need to set opacity for the background image and I need to use plain text in the image. For this, I went through several ways but didn't find a solution that satisfies my requirement. Can you suggest me the best way for this purpose? In the end, what I

How can I set the opacity of a background image using CSS?

Nices I need to set opacity for the background image and I need to use plain text in the image. For this, I went through several ways but didn't find a solution that satisfies my requirement. Can you suggest me the best way for this purpose? In the end, what I

How can I add a border around the canvas?

Thomas I am now wondering how to add a border around the canvas . So just use CSS code border:black 3px solid; You will get the border in the canvas . And I don't want the border on the canvas. I want a border around the canvas . I want to use CSS. thanks for