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

Html – On hover of table cell text, make font size of element bigger while keeping the height of the table cell the same

when I hover on the text inside cell I want that text to get its size increased by 120%. But in my code the column and whole table moves when I hover on marketplace and integrations and newsletter.
I also tried many solutions but couldn’t make it.

That is :
When I hover on MARKETPLACE it should increase its font-size by 120%, it does it, but the problem is the column section moves, same thing happens in integrations and newsletter
It would be great if someone help me in this.

#footer h1 {
  font-size: 35px;
  margin: -145px 0px 0px 150px;
}

#footer div table {
  color: black;
  text-align: left;
  width: 800px;
  height: 220px;
  margin: 0px 115px 0px 0px;
  font-size: 14px;
}

#footer div table tr td {
  padding-bottom: 5px;
  opacity: 70%;
  position: relative;
}

#footer div table tr td a {
  text-decoration: none;
  color: black;
  height: 220px;
  /* position: relative; */
}

#footer div table tr td a:hover {
  transition: 0.5s;
  color: red;
  font-size: 120%;
  position: absolute;
  top: 2px;
  left: 0px;
}
<footer id="footer">
  <div>
    <table border="1">
      <tr>
        <td><a href="">Overview</a></td>
        <td><a href="">About</a></td>
        <td><a href="">Contact</a></td>
      </tr>
      <tr>
        <td><a href="">Pricing</a></td>
        <td><a href="">Team</a></td>
        <td><a href="">Newsletter</a></td>
      </tr>
      <tr>
        <td><a href="">Marketplace</a></td>
        <td><a href="">Blog</a></td>
        <td><a href="">LinkedIn</a></td>
      </tr>
      <tr>
        <td><a href="">Features</a></td>
        <td><a href="">careers</a></td>
      </tr>
      <tr>
        <td><a href="">Integrations</a></td>
      </tr>
    </table>
  </div>
</footer>
Tags:

2

Answers


  1. 0

    1. Prevent column resize: Use table-layout: fixed; for your table. The table columns will not resize automatically anymore. You may need to apply a width to each td in the first table row if you want to define the width for each column perfectly. This step will fix the hover issue for "newsletter".

    2. Prevent row resize: Add display: block; or display: inline-block to your a-tags and a height that is bigger than the scaled font height (e.g. 30px). The height property that you have in your CSS only works for (inline-)block elements but a-tag is inline by default. Remove position: absolute; top: 2px; left: 2px;. This will fix the other issues.

    3. Bonus: Optimize code

      • Remove all position: relative;.
      • Remove the height from table.
      • Move transition: 0.5s; from a:hover to a
      • Consider to simplify your CSS selectors (e.g. #footer div table tr td to #footer td

    In the end your CSS code could look like this:

    #footer h1 {
   font-size: 35px;
   margin: -145px 0px 0px 150px;
}

#footer table {
   color: black;
   text-align: left;
   width: 800px;
   margin: 0px 115px 0px 0px;
   font-size: 14px;
   table-layout: fixed; /* see 1. */
}

#footer td {
  padding-bottom: 5px;
  opacity: 70%;
}

#footer td a {
   text-decoration: none;
   color: black;
   display: inline-block; /* see 2. */
   height: 30px; /* see 2. */
   transition: 0.5s;
}

#footer td a:hover {
   color: red;
   font-size: 120%;
}
    Login or Signup to reply.
  2. 0

    Another approach is to use scale, which since it’s a paint time operation, doesn’t affect the layout. However, transforms don’t work on inline boxes, so we have to make the a element inline-block, and apply a translate so that the text stays left aligned. This needs to be half the increase in size, so for 120% scale, we need a 10% translate on the x-axis.

    #footer h1 {
  font-size: 35px;
  margin: -145px 0px 0px 150px;
}

#footer div table {
  color: black;
  text-align: left;
  width: 800px;
  height: 220px;
  margin: 0px 115px 0px 0px;
  font-size: 14px;
}

#footer div table tr td {
  padding-bottom: 5px;
  opacity: 70%;
  position: relative;
}

#footer div table tr td a {
  text-decoration: none;
  color: black;
  display: inline-block;
}

#footer div table tr td a:hover {
  transition: 0.5s;
  color: red;
  scale: 120%;
  translate: 10%;
}
    <footer id="footer">
  <div>
    <table border="1">
      <tr>
        <td><a href="">Overview</a></td>
        <td><a href="">About</a></td>
        <td><a href="">Contact</a></td>
      </tr>
      <tr>
        <td><a href="">Pricing</a></td>
        <td><a href="">Team</a></td>
        <td><a href="">Newsletter</a></td>
      </tr>
      <tr>
        <td><a href="">Marketplace</a></td>
        <td><a href="">Blog</a></td>
        <td><a href="">LinkedIn</a></td>
      </tr>
      <tr>
        <td><a href="">Features</a></td>
        <td><a href="">careers</a></td>
      </tr>
      <tr>
        <td><a href="">Integrations</a></td>
      </tr>
    </table>
  </div>
</footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search