How to apply zoom transition on label and textbox simultaneously in HTML/CSS?


Tags: css,html5

Problem :

I tried form in HTML and I want to hover zoom transition on label and text box at same time, like if I put a cursor on label then label and text box both zoomed. I tried many codes and YouTube. I can hover both separately but I don't know how to zoom at same time.can anyone have any coding idea.

this is html code : and above is css code plz check both codes because i want to hover simultaneously if i active cursor on label then both label and text area will be zoomed i tried many option but i failed to get answer .if anyone helps me because its my college assignment and i am stuck with it badly please i want it fast answer

label {
  transform: 56px;
  font-width: 180px;
  display: inline-block;
  text-align: right;
  text-align: top;
}
label:hover {
  font-size: 40px;
}
input:hover {
  font-size: 40px;
}
#preview {
  margin-top: 8.5px;
  margin-left: 5px;
  width: 20%;
}
fieldset {
  background-color: lightyellow;
  border: 10px solid yellow;
  margin-bottom: 10px;
  width: 600px height: 900px;
}
<form>
  <h1>PLEASE ENTER YOUR DETAIL FOR OUR DATING SITE</h1>
  <fieldset>
    <legend>YOUR FACE</legend>
    <label>YOUR IMAGE</label>
    <input type="file" id="avatar" name="avatar" required>
    <br>
    <label>image preview:</label>
    <img id="preview">
  </fieldset>
  <fieldset>
    <legend>YOUR GENERAL DETAIL</legend>
    <label>NAME</label>
    <input type="text" name="name">
    <br>
    <br>
    <label>Gender</label>
    : Male
    <input type="radio" width="180px">Female
    <input type="radio">
    <br>
    <br>
    <label>Age:</label>
    <input type="number" width="180px">
    <br>
    <br>
    <label>Date of birth:</label>
    <input type="date" width="180px">
    <br>
    <br>
    <label>Favourite color:</label>
    <input type="color" width="180px">
    <br>
    <br>
    <label>Which country:</label>
    <select required width="180px">
      <br>
      <option value="">None</option>
      <option>America</option>
      <option>Pakistan</option>
      <option>Egypt</option>
      <option>Turkey</option>
      <option>China</option>
      <option>Japan</option>
      <br>
    </select>
  </fieldset>
  <fieldset>
    <legend>Your indicators</legend>
    <br>
    <label>Height:</label>
    Short
    <input type="range" min="0" max="100" ;>Tall
    <br>
    <br>
    <label>Salary:Poor</label>
    <input type="range" min="0" max="100">Rich
    <br>
  </fieldset>
  <fieldset>
    <legend>Your Contact Information</legend>
    <label>Email:</label>
    <input type="email" style="width:180;">
    <br>
    <br>
    <label>Mobile:</label>
    <input type="tel " width="180px ">
    <br>
    <br>
    <label>Address:</label>
    <textarea></textarea>
    <br>
    <br>
    <label>Method to contact you:</label>
    <input type="checkbox " ; width="auto ">
    <label>Email</label>
    <input type="checkbox ">
    <label>Whatsapp</label>
    <input type="checkbox ">
    <label>In-appchat</label>
    <input type="checkbox ">
  </fieldset>
  <input type="submit " value="Submit ">



  <script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js "></script>
</form>



Solution :

Use the Adjacent sibling combinator to choose the input next to the hovered label.

label {
  transform: 56px;
  font-width: 180px;
  display: inline-block;
  text-align: right;
  text-align: top;
}
label:hover, label:hover + input, label:hover + select, label:hover + textarea {
  font-size: 40px;
}
#preview {
  margin-top: 8.5px;
  margin-left: 5px;
  width: 20%;
}
fieldset {
  background-color: lightyellow;
  border: 10px solid yellow;
  margin-bottom: 10px;
  width: 600px height: 900px;
}
<form>
  <h1>PLEASE ENTER YOUR DETAIL FOR OUR DATING SITE</h1>
  <fieldset>
    <legend>YOUR FACE</legend>
    <label>YOUR IMAGE</label>
    <input type="file" id="avatar" name="avatar" required>
    <br>
    <label>image preview:</label>
    <img id="preview">
  </fieldset>
  <fieldset>
    <legend>YOUR GENERAL DETAIL</legend>
    <label>NAME</label>
    <input type="text" name="name">
    <br>
    <br>
    <label>Gender</label>
    : Male
    <input type="radio" width="180px">Female
    <input type="radio">
    <br>
    <br>
    <label>Age:</label>
    <input type="number" width="180px">
    <br>
    <br>
    <label>Date of birth:</label>
    <input type="date" width="180px">
    <br>
    <br>
    <label>Favourite color:</label>
    <input type="color" width="180px">
    <br>
    <br>
    <label>Which country:</label>
    <select required width="180px">
      <br>
      <option value="">None</option>
      <option>America</option>
      <option>Pakistan</option>
      <option>Egypt</option>
      <option>Turkey</option>
      <option>China</option>
      <option>Japan</option>
      <br>
    </select>
  </fieldset>
  <fieldset>
    <legend>Your indicators</legend>
    <br>
    <label>Height:</label>
    Short
    <input type="range" min="0" max="100" ;>Tall
    <br>
    <br>
    <label>Salary:Poor</label>
    <input type="range" min="0" max="100">Rich
    <br>
  </fieldset>
  <fieldset>
    <legend>Your Contact Information</legend>
    <label>Email:</label>
    <input type="email" style="width:180;">
    <br>
    <br>
    <label>Mobile:</label>
    <input type="tel " width="180px ">
    <br>
    <br>
    <label>Address:</label>
    <textarea></textarea>
    <br>
    <br>
    <label>Method to contact you:</label>
    <input type="checkbox " ; width="auto ">
    <label>Email</label>
    <input type="checkbox ">
    <label>Whatsapp</label>
    <input type="checkbox ">
    <label>In-appchat</label>
    <input type="checkbox ">
  </fieldset>
  <input type="submit " value="Submit ">



  <script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js "></script>
</form>


    CSS Howto..

    how to Resize Quick TIme Player to the size of an HTML/CSS DIV

    How to resize DIV to less than its initial width & height?

    How to show the first N elements of a block and hide the others in css?

    How can I center a graphic under a
      -based nav menu?

    Always show hover text in an appropriate position

    how to show section of a CSS sprite within a set position on the whole html body

    How to select lowest level ul in nested ul in Javascript/ css

    How to target CSS for iPad but exclude Safari 4 desktop using a media query?

    Using Bootstrap, how do i achieve this horizontal tab layout? [closed]

    How to customize twitter/bootstrap more deeply? [closed]

    How to prevent css keyframe animation on page load?

    How to position two blocks side by side with CSS

    How to link to an image from a CSS file when using the resource plugin 1.2.14

    How should I convert this object from .PSD to HTML/CSS?

    How to position two divs on either side of the screen, HTML, CSS

    How to change/remove CSS classes definitions at runtime?

    how to make two functionality in one button.CSS BOOTSTRAP

    How to resize the width of div left to another which has float:left;?

    How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?

    How can I center an iframe but also have it display inline?

    How to use HTML-CSS on outputting data conditionally?

    How to make footer responsive through CSS?

    How to change CSS portrait to landscape in iphone?

    How to resize QR code?

    How do I center (vertically and horizontally) buttons in a div tag?

    How do I adjust the height of the pikaChoose plugin without ruining the width?

    How to change font of select list items in the drop down

    jquery mobile data-filter css styling--how to?

    How to define class in CSS

    How to style QTableView CSS