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

Html – blur image and show text on hover?

I have this grid with 3 columns, and when i click one of the divs it’ll go down a row and span the whole row, it also closes back up when i click on it again. Also, when I open a different div, it’ll close all the other ones if theyre open. so that there’s only one open at a time

how do I make it so that when I hover on it, it’ll blur the div and show "Click for more info" in the middle? i was thinking of adding a div with the text on each one but that seems too repetitive.. is there an easier way to do it?

document.querySelectorAll('#gridALBUM > div').forEach((D,_,A)=>
  {
  D.addEventListener('click', e=>
    {
    if (D.classList.toggle('span'))
      A.forEach(d =>{ if(d!=D) d.classList.remove('span') });
    })
  })
#gridALBUM {
  margin: 50px auto;
  max-width: 908px;
  display: grid;
  grid-gap: 0 4px;
  grid-template-columns: repeat(3, 300px);
  grid-auto-flow: dense;
  background-color: lightblue;
}

#gridALBUM > div {
  border  : 1px solid black;
  display : flex;
}

#gridALBUM > div:not(.span) > div {
  display : none; 
 }

#gridALBUM > div.span {
  grid-column      : 1 / 4;
  background-color : #47479c;
}
<div id="gridALBUM">
  <div id="one"   ><h1>1</h1> <div><h2> one   </h2></div></div>
  <div id="two"   ><h1>2</h1> <div><h2> two   </h2></div></div> 
  <div id="three" ><h1>3</h1> <div><h2> three </h2></div></div>
  <div id="four"  ><h1>4</h1> <div><h2> four  </h2></div></div>
  <div id="five"  ><h1>5</h1> <div><h2> five  </h2></div></div>
  <div id="six"   ><h1>6</h1> <div><h2> six   </h2></div></div>
  <div id="seven" ><h1>7</h1> <div><h2> seven </h2></div></div>
  <div id="eight" ><h1>8</h1> <div><h2> eight </h2></div></div>
  <div id="nine"  ><h1>9</h1> <div><h2> nine  </h2></div></div>
  <div id="ten"   ><h1>10</h1><div><h2> ten   </h2></div></div>
</div>
Tags:

2

Answers


  1. 0

    One simple solution could be to add a filter to your h1 and a backdrop filter to your div, if you have some background-image or so. Then add content to the ::after pseudo element.

    document.querySelectorAll('#gridALBUM > div').forEach((D,_,A)=>
  {
  D.addEventListener('click', e=>
    {
    if (D.classList.toggle('span'))
      A.forEach(d =>{ if(d!=D) d.classList.remove('span') });
    })
  })
    #gridALBUM {
  margin: 50px auto;
  max-width: 908px;
  display: grid;
  grid-gap: 0 4px;
  grid-template-columns: repeat(3, 300px);
  grid-auto-flow: dense;
  background-color: lightblue;
}

#gridALBUM > div {
  border  : 1px solid black;
  display : flex;

   &:hover {
      backdrop-filter: blur(10px);
      h1 { filter: blur(10px); }
      &::after {
         content: 'Click for more info';
         align-self: center;
         justify-self: center;
      }
   }

}

#gridALBUM > div:not(.span) > div {
  display : none; 
 }

#gridALBUM > div.span {
  grid-column      : 1 / 4;
  background-color : #47479c;
}
    <div id="gridALBUM">
  <div id="one"   ><h1>1</h1> <div><h2> one   </h2></div></div>
  <div id="two"   ><h1>2</h1> <div><h2> two   </h2></div></div> 
  <div id="three" ><h1>3</h1> <div><h2> three </h2></div></div>
  <div id="four"  ><h1>4</h1> <div><h2> four  </h2></div></div>
  <div id="five"  ><h1>5</h1> <div><h2> five  </h2></div></div>
  <div id="six"   ><h1>6</h1> <div><h2> six   </h2></div></div>
  <div id="seven" ><h1>7</h1> <div><h2> seven </h2></div></div>
  <div id="eight" ><h1>8</h1> <div><h2> eight </h2></div></div>
  <div id="nine"  ><h1>9</h1> <div><h2> nine  </h2></div></div>
  <div id="ten"   ><h1>10</h1><div><h2> ten   </h2></div></div>
</div>
    Login or Signup to reply.
  2. 0

    Yes you can use pseudo element, it’s a classic. For the background blur, you can use backdrop-filter

    document.querySelector(".square").addEventListener('click', () => console.log('boo'))
    .square {
  border: 1px solid red;
  width: 150px;
  height: 150px;
  background-image: url('https://picsum.photos/150');
  position: relative;
  cursor: pointer;
}

.square:hover::after {
  content: 'Please click here';
  font-size: 20px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.75);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  backdrop-filter: blur(5px);
  text-align: center;
  display: flex;
  align-items: center;
  
  
}
    <div class="square">
  normal text
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search