Question 125037 in CSS Question posted in
Some basic documentation can be found here.

Css – How to make text dynamically transparent or get same effect as in the example below?

I want to create the same effect as on this page. I made everything except the transparent text when image moves over it..

Anyone has any idea how its made?

https://www.bazil.fr/

Thanks a lot in advance!

Everything i know i already tried..

Tags:

2

Answers


  1. 0

    Here you can try this logic:

       body{
      background-color : black;
    }

    h1 {
      background-clip: text;
      color: transparent;
      text-stroke: 1px white;
      -webkit-text-stroke: 1px white;
    }
    
    h1:hover{
      color : white;
    }
    <body>
  <h1>HELLO WORLD</h1>
</body>
    Login or Signup to reply.
  2. 0 
       body{
      background-color : black;
      transition : 0.5s ease-in-out;
    }

    h1 {
      background-clip: text;
      color: transparent;
      text-stroke: 1px white;
      -webkit-text-stroke: 1px white;
    }
    
    /*change color to white of hovered element*/
    div:hover h1{
      color : white;
    }
    
    /*trick to select current and all sibling elements (~ selector)*/
   div h1:hover, div h1:hover ~ h1 {
      color : transparent;
    }
    <body>
  <div>
    <h1 class="a">ONE</h1>
    <h1 class="b">TWO</h1>
    <h1 class="a">THREE</h1>
    <h1 class="a">FOUR</h1>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search