I want the text to change color and zoom when the cursor is near it (when the mouse enters the area of the div containing the text). Currently, I am able to change the text color only when hovering directly over it. Below is a snippet of the code.
HTML:
<div fxLayout="row wrap" class="max container">
<div fxFlex="100%" fxLayoutAlign="center">
<!--here there is an image-->
</div>
<div fxFlex="100%" class="centered-text" fxHide fxShow.gt-lg>
<h2 [ngClass]="{'gradient' : this.gradient,'lighter':lighter, 'zoom':zoom, 'scale':1.2}" style="margin: 0;" class="font">
hoverMe
</h2>
</div>
</div>
Typescript:
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'iet-box-academy',
templateUrl: './box-academy.component.html',
styleUrls: ['./box-academy.component.scss']
})
export class BoxAcademyComponent implements OnInit {
@Input() scale = 1;
@Input() img = '';
@Input() title = 'TITOLO';
@Input() descr = '';
@Input() align = "centerer";
@Input() lighter = false;
@Input() zoom = true;
@Input() gradient: boolean = false;
constructor() {
}
ngOnInit(): void {
}
}
CSS:
.container {
position: relative;
text-align: center;
color: black;
}
.zoom {
transition: transform .2s; /* Animation */
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5);
color: #00D3FF;
}