Responsive image with transparent textbox

Ivan MNE · June 17, 2020

Dear Gentlemen,

I am very new in programing but I am doing my best :)

Could anybody explain me how to resize transparent text-box without moving the text?

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_transparent_bottom

Thanks in advance

Ivan

Inquirer · June 18, 2020

<!DOCTYPE html>
<html>
  <head>
    <style>
      .class {
       color: black; 
      }
      .class:hover {
        transform: resize(3px);
      }
    </style>
  </head>
  <body>
    <button class="class" id="id">Text</button>
  </body>
</html>

or using JS

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
   		font-size: 12px;
      }
      .toggled {
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <p>This text will be toggled on button click</p>
    <button onclick="myFunction()">Click to enlarge text</button>
    <script>
      function myFunction() {
        var element = document.body;
   		element.classList.toggle("toggled");
      }
    </script>

Sign In

Responsive image with transparent textbox

Recommended Posts

Ivan MNE

Link to comment

Share on other sites

Inquirer

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity