CODEWITHSUNDEEP
htmlcsshover
Timka
Timka

Reputation: 3

How to increase transform: scale radius when hover

I have table of rectangles with some data and its font-size and width are really small (just box shape) Whenever I hover it, it does transform: scale(6.0) (size gets bigger 6x) For example I have table with with 9 rectangles, and total and last element is located at x = 500px, y = 500px. When it hovers it becomes bigger (6x its size), but when my mouse hovers points 501 501 or more its closes, i wanted to increase that radius of work, whenever i hover elements i need. I do use class multi to elements which i need to increase size when i hover.

.multi{
    background-color: #ffffff;
    transition: transform .2s; /* Animation */
    border: 1px solid black;
}

.multi:hover {
    transform: scale(6.0);
}

Upvotes: 0

Views: 1378

Answers (1)

Orange Orange
Orange Orange

Reputation: 1991

Delete the width, height and background property if you want. Also change the scale to 6.0 (i put 1.2 as an example).

.multi {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-property: transform; /* Safari */
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-property: transform;
    transition-duration: 0.2s;
}

.multi:hover {
    transform: scale(1.2);
}
<div class="multi"></div>

Upvotes: 1

Related Questions