Style child element when hover on parent-CodePudding

I am trying to achieve a style - when not hovered on, the label text of an image link is blurred and image is in focus and once hovered on the image gets blurred and the text becomes in focus, but I am having problems figuring out how to do this.

The most logical way I thought was the code below - but it is not working.

Any ideas on how to achieve this or can anyone see anything wrong in my code and why this is not working? Thanks in advance!

.centeredimage {
   
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 25px; 
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.photolink {
  font-family: 'Didact Gothic', sans-serif; 
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
  /*color: #66c9cc;*/
  color: #1e87f0;
  filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
}

.imglink {
  z-index: -999;
}

.imglink:hover {
  filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
}

.imglink:hover .photolink {
  filter: none !important;
}

<!DOCTYPE html>
<html>
<head>
    
</head>
<body>
<div >
       <a href="#">
            <div >
                 <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/fennec-fox-vulpes-zerda-royalty-free-image-1600996728.jpg?crop=0.663xw:1.00xh;0.162xw,0&resize=768:*" alt="">
                <div ><h3 >Image link title</h3></div>
            </div>
        </a>
    </div>
</body>
</html>

CodePudding user response：

The issue is that you're applying the filter: blur(3px) style to the .imglink element, which contains the h3.photolink element. You can fix this by only applying the blur to the .imglink img element, like this:

.imglink:hover img {
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
}

Also a slight refactor of you styles might improve readability by only applying the filter to the img element on hover of the .imglink element (as you have), and only applying the filter to the h3 element on not hover of the .imglink element, like this:

.centeredimage {
  background-color: teal;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 25px; 
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.photolink {
  font-family: 'Didact Gothic', sans-serif; 
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
  /*color: #66c9cc;*/
  color: #1e87f0;
}

.imglink {
  z-index: -999;
}

.imglink:hover img {
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
}

.imglink:not(:hover) .photolink {
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
}

<!DOCTYPE html>
<html>
<head>
    
</head>
<body>
<div >
       <a href="#">
            <div >
                 <img src="https://www.humanesociety.org/sites/default/files/styles/1441x612/public/2022-08/hl-yp-cats-579652.jpg?h=a0b0b8d2&itok=cjI_JcZN" alt="">
                <div ><h3 >Image link title</h3></div>
            </div>
        </a>
    </div>
</body>
</html>

CodePudding user response：

You have to add img behind the imglink:hover, otherwise it will also blur the link on hover

.centeredimage {
   
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 25px; 
  }
  
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .photolink {
    font-family: 'Didact Gothic', sans-serif; 
    font-weight: 700;
    font-size: 1.2rem;
    text-align: center;
    /*color: #66c9cc;*/
    color: #1e87f0;
    filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  }
  
  .imglink {
    z-index: -999;
  }
  
  /* Added img behind the hover */
  .imglink:hover img{
    filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  }
  
  .imglink:hover .photolink {
    filter: none !important;
  }

<div >
       <a href="#">
            <div >
                 <img src="https://www.humanesociety.org/sites/default/files/styles/1441x612/public/2022-08/hl-yp-cats-579652.jpg?h=a0b0b8d2&itok=cjI_JcZN" alt="">
                <div ><h3 >Image link title</h3></div>
            </div>
        </a>
    </div>

CodePudding user response：

You can clean up your html and css a bit. Also h3 inside a a-tag won't work. There is NO need for z-index: -999;. If you look at my example and class names, you can control all from the .card:hover.

.card {
  position: relative;
  padding: 1rem;
  background-color: aqua;
}

.card__image {
  display: block;
  max-width: 100%;
  width: 100%;
}

.card:hover .card__image {
  filter: blur(3px);
}

.card__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card__link {
  filter: blur(3px);
}

.card:hover .card__link {
  filter: unset;
}

.card__link::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div >
  <img src="https://www.humanesociety.org/sites/default/files/styles/1441x612/public/2022-08/hl-yp-cats-579652.jpg?h=a0b0b8d2&itok=cjI_JcZN" alt="" >

  <h3 ><a href="#" >Image link title</a></h3>
</div>