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

Html – The border disappears when opacity is added to the image

I want to display the image on mouse-over and keep the border.
However, when I add opacity, the border disappears as well. How can I maintain the border while displaying the image on mouse-over?"

Here is my code:

<div class="finishedprojects">
<img src="https://shorturl.at/bR589">
 </div>

 .finishedprojects img {
  width: 100%;
  max-width: 350px;
  height: 250px;
  object-fit: cover;
  border: solid yellow 1em;
  background-color: black;
  opacity:0;
}


.finishedprojects img:hover {
  cursor: pointer;
  opacity: 1;
}

I tryed.finishedprojects img {
border: solid yellow 1em}
But it doesn’t work.

Tags:

3

Answers


  1. 0

    You can use the ::before pseudo-element to create a border on the image container that will not be affected by the opacity change on hover.

    .finishedprojects {
  position: relative;
  width: 100%;
  max-width: 350px;
  height: 250px;
  border: solid yellow 1em;
  background-color: black;
}

.finishedprojects img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.finishedprojects:hover img {
  opacity: 1;
}

.finishedprojects::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: solid yellow 1em;
}
    Login or Signup to reply.
  2. 0

    You only have to set width: max-content; in your container class .finishedprojects and also move the border styling there. See my snippet:

    .finishedprojects  {
    width: max-content;
    border: solid yellow 1em;
}

.finishedprojects img {
    width: 100%;
    max-width: 350px;
    height: 250px;
    object-fit: cover;
    background-color: black;
    opacity:0;
}

.finishedprojects img:hover {
    cursor: pointer;
    opacity: 1;
}
    <div class="finishedprojects">
    <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Demo Image">
</div>

    If you also want to have a black background if no image is displayed, move the background property background-color: black; from
    .finishedprojects img class to the .finishedprojects class.

    Login or Signup to reply.
  3. 0

    To keep the border visible when the image is displayed on mouse-over with opacity, you can wrap the image inside another div and apply the border to that div instead of the image

    .finishedprojects .image-wrapper {
width: 100%;
max-width: 350px;
height: 250px;
object-fit: cover;
border: solid yellow 1em;
background-color: black;
position: relative;
}

.finishedprojects .image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
position: absolute;
top: 0;
left: 0;
}

.finishedprojects .image-wrapper:hover img {
opacity: 1;
}
    <div class="finishedprojects">
  <div class="image-wrapper">
    <img src="https://shorturl.at/bR589">
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search