CODEWITHSUNDEEP
csshtml
rahul tyagi
rahul tyagi

Reputation: 643

Changing the size of an element relative to itself

I want to change the change the size of an HTML element say div relative to itself

 <div class="visual-cue" style="height:100px ;width:100px">
 </div>

Now in the CSS I want to do something like this

 .visual-cue:hover{
      /* change the height to 90% of current height and same for width
      */
  }

I would like to do it without javascript. Right now using width:90%

does not work.

Upvotes: 2

Views: 448

Answers (2)

GolezTrol
GolezTrol

Reputation: 116100

If you mean 90% of the screen (viewport), you can use vw as a unit:

.visual-cue {
  height:100px;
  width:100px;
  background: yellow;
}

.visual-cue:hover {
  width: 90vw;
  height: 90vw;
}

.smoothsize {
  transition-duration: .5s;
}
 <div class="visual-cue smoothsize">X
 </div>

Or, if you meant 90% of its original size, use transform: scale(0.9):

.visual-cue {
  height:100px;
  width:100px;
  background: yellow;
}

.visual-cue:hover {
  transform: scale(0.9);
}

.smoothsize{
  transition-duration: .5s;
}
<div class="visual-cue smoothsize">X
 </div>

Upvotes: 2

maioman
maioman

Reputation: 18734

could use:

  .visual-cue:hover{
    transform:scale(0.9,0.9)
   }

fiddle

Upvotes: 1

Related Questions