CODEWITHSUNDEEP
htmlcss
rover
rover

Reputation: 31

How can change font size on :hover but it stays centered

so i used :hover { font-size: xx px; } but that results to this https://gyazo.com/d636e4e5341bfd35291bed0c41159ee0

is is possible that the font size can get bigger but the chess piece will still be centered?

Upvotes: 0

Views: 1931

Answers (5)

Rahul Daksh
Rahul Daksh

Reputation: 230

You can simply do this using flex. Put another wrapper over chess-txt and give display: flex to it.

<parent-txt>
  <ches-text></ches-text>
</parent-txt>

For instance;

.parent-txt{
    display: flex;
 }
 .ches-text{
    font-size:10px;
    margin: auto;
 }
 .ches-text:hover{
    font-size:48px;
 }

Upvotes: 0

Syed Muhammad Moiz
Syed Muhammad Moiz

Reputation: 445

you can change format size on :hover but this will not be applied in your case on a chessboard. In your case, every square should be a separate image to hover independently.

.ImageToZoom{
     
      transition: transform 0.2s;
     
    }
    
    .ImageToZoom:hover {
     
      transform: scale(1.5); 
    }

Upvotes: 1

Toni BCN
Toni BCN

Reputation: 392

Have you tried to use css transform scale?

.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}
<!DOCTYPE html>
<html>

<body>

<p>Hover over the image.</p>
  
<img class="zoom" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/wisconsin.svg"/>

</body>
</html>

Upvotes: 1

James
James

Reputation: 2787

Try using this:

div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  border: 1px solid black;
  height: 100px;
  text-align: center
}

div:hover {
  font-size: 50px
}
<div>Hi</div>

Upvotes: 2

Mirza Irtiza
Mirza Irtiza

Reputation: 174

make your your element is block element and width 100%. than your bigger font will be centerlized. and you can add flex to the parent. display:flex; justify-content: center; align-item:center;

`.ches-text{
    font-size: 12px;
    text-align:center;
    width: 100%;
    display:block;
}
.ches-text:hover{
    font-size:48px;
}
`

Upvotes: 1

Related Questions