CODEWITHSUNDEEP
javascripthtmlcsssass
Mr Boolean
Mr Boolean

Reputation: 103

Blur entire background on hover

So I have a few items on my front page, which shows a few anime. What I am looking to do is when you hover over say the first show, "Hunter X Hunter", I want everything else on the page excluding the one that is being hovered over to be blurred.

enter image description here

I have looked around and seen a few examples, but I feel my situation is a bit different. All the items on the front page are just being echo'ed out from the database.

$fetch = mysqli_query($conn, "SELECT * FROM shows");
while($row = mysqli_fetch_array($fetch)){
    $ID = $row['ID'];
    $ShowName = $row['ShowName'];
    $ShowID = $row['ShowID'];
    $Updated = $row['Date'];
    $Poster = $row['Poster'];
    $Description = $row['Description'];

    echo '
    <div class="col s2 m2 2">
    <div class="card large">
    <div class="card-image">
      <img src="'.$Poster.'">
      <span class="card-title" style="color:white; text-shadow: 0 1px black;background:rgba(0,0,0,0.18);padding: 4px 8px;"><strong>'.$ShowName.'</strong></span>
    </div>
    <div class="card-content">
      <p>'.$Description.'</p>
    </div>
    <div class="card-action">
      <center><a href="player.php?showid='.$ShowID.'">Watch Now!</a></center>
    </div>
  </div>
  </div>
    ';
}

Can anyone point the way to start? I'm kind of stuck on this.

Upvotes: 3

Views: 9223

Answers (2)

Joshua Robinson
Joshua Robinson

Reputation: 3573

This is doable, see below:

HTML

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
<ul>

CSS

body:hover li:not(:hover) {
  filter: blur(2px);
}

Live example can be found on codepen here: https://codepen.io/anon/pen/eXpmZL?editors=1100

How this works is we do not want to blur any list items unless the user has a mouse hovering over the body of the page. This prevents items from blurring when say the mouse pointer is hover over the browser chrome or scrollbar. Then the CSS statement reads blur all li components but not the one currently being hovered over.

Upvotes: 5

mkrl
mkrl

Reputation: 750

There are a couple of approaches. The easiest one could be utilizing :hover and :not(:hover) selectors, which will blur everything when you hover your mouse inside of the parent container <div class="col s2 m2 2">, in your case, but the child element that is being hovered (<div class="card large"> in your case) will remain non-blurred.

.container {
  display: flex;
}

.card {
  margin: 1rem;
}

.container:hover > .card:not(:hover) {
  filter: blur(4px);
}
<div class="container">
  <div class="card">
    <img src="http://placekitten.com/120/120">
  </div>
  <div class="card">
    <img src="http://placekitten.com/120/120">
  </div>
  <div class="card">
    <img src="http://placekitten.com/120/120">
  </div>
  <div class="card">
    <img src="http://placekitten.com/120/120">
  </div>
</div>

You could also do that with JS in multiple ways, for example, by attaching an onmouseover event to add a class.

Upvotes: 8

Related Questions