CODEWITHSUNDEEP
htmlcss
Zed
Zed

Reputation: 177

How do I make image hover work on border - CSS

I have designed two borders. One behind the image (black border) and the second on the image (pink border). The image hover is working outside the pink border. But isn't working inside it. How can I make hover work inside the pink border as well?

HTML:

<div class="img-border1">
            <img src="https://assets.entrepreneur.com/content/3x2/2000/20191219170611-GettyImages-1152794789.jpeg" alt="">
</div>

CSS:

.img-border1{
        position: relative;
        border: 2px solid;
        width: 20%;
        height: 200px;
    }
   
    .img-border1 img{
        position: absolute;
        width: 300px;
        height: 265px;
        filter: grayscale(100%);
        transition: .25s;
        left: 15px;
        top: 15px;
        
    }
    .img-border1 img:hover{
        filter: none;
        -webkit-filter: none;
    }
    .img-border1::after{
        border: 4px solid orchid;
        content: "";
        display: block;
        position: absolute;
        top: 30px;
        left: 30px;
        right: -40px;
        bottom: -40px;
    }

Visual Representation at: Codepen

Upvotes: 0

Views: 93

Answers (1)

Chaska
Chaska

Reputation: 3205

Try putting the :hover to .img-border1 instead of img.

.img-border1 {
  position: relative;
  border: 2px solid;
  width: 20%;
  height: 200px;
}

.img-border1 img {
  position: absolute;
  width: 300px;
  height: 265px;
  filter: grayscale(100%);
  transition: .25s;
  left: 15px;
  top: 15px;
}

.img-border1:hover img {
  filter: none;
  -webkit-filter: none;
}

.img-border1::after {
  border: 4px solid orchid;
  content: "";
  display: block;
  position: absolute;
  top: 30px;
  left: 30px;
  right: -40px;
  bottom: -40px;
}
<div class="img-border1">
  <img src="https://assets.entrepreneur.com/content/3x2/2000/20191219170611-GettyImages-1152794789.jpeg" alt="">
</div>

Upvotes: 1

Related Questions