1

I have put a :hover selector in .content but it is not working, instead the hover selector of background is coming into action whenever it is being hovered over. When both of the .showcase:hover is removed from css then it comes into action. What is the reason for the same and what if I need both the .content:hover and .showcase:hover?

body {
  background: rgba(0, 0, 0, 0.9);
  margin: 0;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.showcase::before {
  content: "";
  height: 100vh;
  width: 100%;
  background-image: url(https://image.ibb.co/gzOBup/showcase.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  filter: blur(10px);
  -webkit-filter: blur(10px);
  transition: all 1000ms;
}

.content:hover{
  filter: blur(10px); /* why is this effect not working */
}

.showcase:hover::before {
  filter: blur(0px);
  -webkit-filter: blur(0px);
}

.showcase:hover .content {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

.content {
  position: absolute;
  z-index: 1;
  top: 10%;
  left: 50%;
  margin-top: 105px;
  margin-left: -145px;
  width: 300px;
  height: 350px;
  text-align: center;
  transition: all 1000ms;
}

.content .logo {
  height: 180px;
  width: 180px;
}

.content .title {
  font-size: 2.2rem;
  margin-top: 1rem;
}

.content .text {
  line-height: 1.7;
  margin-top: 1rem;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
      crossorigin="anonymous"
    />
    <title>Blur Landing</title>
  </head>

  <body>
    <header class="showcase">
      <div class="content">
        <img
          src="https://image.ibb.co/ims4Ep/logo.png"
          class="logo"
          alt="Traversy Media"
        />
        <div class="title">Welcome To Traversy Media</div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, vel.
        </div>
      </div>
    </header>
      </body>
</html>

Improve this question

1 Answer 1

Reset to default
1

Your selector

.content:hover{
  filter: blur(10px);
}

Is being overridden by another selector

.showcase:hover::before {
  filter: blur(0px);
  -webkit-filter: blur(0px);
}

No matter if you hover over it, the showcase selector is taking effect instead.

The solution is setting a more specific hover selector.

.content:hover, .showcase:hover .content:hover {
  filter: blur(10px); // Covers the "double" hover.
}


body {
  background: rgba(0, 0, 0, 0.9);
  margin: 0;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.showcase::before {
  content: "";
  height: 100vh;
  width: 100%;
  background-image: url(https://image.ibb.co/gzOBup/showcase.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  filter: blur(10px);
  -webkit-filter: blur(10px);
  transition: all 1000ms;
}

.content:hover, .showcase:hover .content:hover {
  filter: blur(10px);
}

.showcase:hover::before {
  filter: blur(0px);
  -webkit-filter: blur(0px);
}

.showcase:hover .content {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

.content {
  position: absolute;
  z-index: 1;
  top: 10%;
  left: 50%;
  margin-top: 105px;
  margin-left: -145px;
  width: 300px;
  height: 350px;
  text-align: center;
  transition: all 1000ms;
}

.content .logo {
  height: 180px;
  width: 180px;
}

.content .title {
  font-size: 2.2rem;
  margin-top: 1rem;
}

.content .text {
  line-height: 1.7;
  margin-top: 1rem;
}
<header class="showcase">
      <div class="content">
        <img
          src="https://image.ibb.co/ims4Ep/logo.png"
          class="logo"
          alt="Traversy Media"
        />
        <div class="title">Welcome To Traversy Media</div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, vel.
        </div>
      </div>
    </header>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.