css Question posted in
Some basic documentation can be found here.

Css – Hide the image, without the borders

I have a simple img tag:

<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png" alt="">

And I have these styles for it:

.image {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    border: 10px solid #fff;
}

I want somehow only with css, to hide the image, without hiding the border. And these styles have to be applied only for the image (.image{} selector). This mean that it have to be done without any wrappers.

I know that it sound a little bit strange and unnecessary, but I need it.

I’ve tried the following:

  • "visibility" and "opacity" properties, but they hide the image and the border.

  • Using the rgba() for the border color, and "opacity" and "visibility" again.

  • Putting "opacity = 0" for the image and try to make the borders with ::before and ::after, but I saw that these don’t work for the tags, because they are empty by default.

Tags:

2

Answers


  1. 0

    Set element width and height to be 0px, but add padding, to keep element dimensions. Than image will be not visible, element will have dimensions and border applied:

    body {
  background-color: #555;
}

.image {
    width: 0px;
    height: 0px;
    border-radius: 100%;
    border: 10px solid #fff;
    padding-left: 200px;
    padding-top: 200px;
}
    <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png" alt="">
    Login or Signup to reply.
  2. 0

    Use mask:

    .image {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 10px solid red;
  
  -webkit-mask:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

body {
  background: linear-gradient(90deg,pink, lightblue)
}
    <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png" alt="">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search