Looking to modify the height and width of an image when it is hovered over using inline CSS

My current project involves working with a dynamic template where the HTML code is generated from the back-end using TypeScript. I am trying to implement inline CSS on hover, but despite having written the necessary code, it does not seem to work as intended.

style=":hover { height: 72%; width: 117%;}; cursor:pointer; height:70%; width:115%;"

Code Sample:

<img class="ImgStyle1" src="{{item.FrontPage}}" id="iCapImg" name="nBookImg{{i}}" (click)="fullScreenImage($event)" alt="{{item.Caption}}" style=":hover { height: 72%; width: 117%;}; cursor:pointer; height:70%; width:115%;">

If anyone could provide assistance with this issue, it would be greatly appreciated.

htmlcssangulartypescript

Answer №1

Revised with input from Maryannah

There is an issue where [ngStyle] does not support inline objects.

<p [ngStyle]="{background-color:red}"> /**ERROR**/

One workaround is to use mouseover and mouseout events, a variable, and [style.property], like this:

<img (mouseover)="mouseOver=true" 
   (mouseout)="mouseOver=false" 
   [style.height]="mouseOver?'72%':'70%'
   [style.width]="mouseOver?'117%':'115%'
   ...
   class="ImgStyle1" 
   src="{{item.FrontPage}}" 
   id="iCapImg" name="nBookImg{{i}}" 
   (click)="fullScreenImage($event)" 
   alt="{{item.Caption}}"
</img>

In addition, Maryannah provided another solution.

Answer №2

If you're looking to make it all fit on one line (even if it's not the prettiest sight), here's how you can do it:

<div #ref (mouseenter)="ref.style.width = '100%'" (mouseleave)="ref.style.width = '50%'" [style.width.%]="50">

This explanation is quite straightforward:

When hovering over, use code to dynamically change the style of the child element in the view

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to pull data from an HTTP source without relying on promises

Here is a simplified version of the service code I am using: Load(Channel: any) { // let URL = Globals.AppSiteRoot + Channel.URL return this.LoadData(URL) } Load_Default() { let URL = Globals.AppSiteRoot + "di ...

angulartypescriptpromiseobservableionic4

What is the best way to send parameters to an async validator when working with reactive controls in Angular

Issue with Validation I am facing a challenge while using the same component for both read and edit routines. The async-validator functions perfectly when dealing with new entries. However, a problem arises if the user mistakenly changes a value and then ...

angularangular-reactive-formsangular-validation

Setting up Angular 7 to interact with a .Net Core Web API in Visual Studio 2017

I have been on a quest to find the solution to my programming dilemma. The issue at hand involves a Visual Studio 2017 (Community) project that contains an Angular 7 app with a .NET Core web API backend all within the same project. I have successfully test ...

c#node.jsangularasp.net-core-webapiangular7

What is the best way to leverage a webbrowser control for design purposes while keeping the functionality in C#?

Observing some apps, it seems they utilize HTML/CSS/Javascript for styling - a much simpler approach compared to crafting the same thing natively. However, these apps have their logic written in C#. Sadly, I am clueless on connecting the two. Research yiel ...

c#javascriptcssuser-interface

Is it possible to enable tooltips to function through the innerHTML method?

Currently, I am utilizing the innerHTML attribute to modify the inner HTML of a tag. In this instance, it involves the <td></td> tag, but it could be applied to any tag: <td *matCellDef="let order" mat-cell [innerHTML]="order. ...

javascripthtmlangulartypescript

Dynamic image swapping with Jquery: How to change image links on the fly

Hi there! I'm currently working on a code where I can change images dynamically and it's going well. However, I am facing a challenge with changing the links that correspond to each image dynamically as well. Does anyone have any suggestions on h ...

jqueryhtml

Ways to incorporate an external JavaScript file into Angular and execute it within an Angular application

Imagine you have a file called index.js containing a function expression: $scope.submit = function() { if ($scope.username && $scope.password) { var user = $scope.username; var pass = $scope.password; if (pass == "admin" && user ...

angularangular2-routingangular2-forms

What is the method used to incorporate the radial gradient in this design?

As I was browsing the internet, I came across several websites with beautiful natural gradients on their backgrounds. However, I'm puzzled as to how they achieved this effect. It doesn't seem like a simple image file because the gradient adjusts ...

css

looking to restrict the interface to only specific types

Currently working with TypeScript and I have a query regarding the utilization of TypeScript interface. Is there a way to selectively extract and output specific key types from the interface being used? While I am able to isolate the type I need, I am inte ...

javascripttypescript

Steps for upgrading from Ionic framework v1.2.4 to Ionic framework v2.0.0-beta with npm

Currently, I am in the process of upgrading my Ionic framework from version 1.2.4 to the latest version 2.0.0-beta using the node package manager (npm). I stumbled upon a guide on the official documentation site that instructed me to execute this command ...

angularnpmionic2

Element mysteriously concealed in certain Safari cases, consistently visible in Firefox and Chrome

A new angular application has been developed as a "bounce" page for an upcoming social iOS app currently in public beta. Users have the ability to share their profiles by simply providing a link to the site. If the page is accessed via an iOS device w ...

javascripthtmlcssangularjstwitter-bootstrap-3

Extracting Tailwind color palette through API request

After conducting some research, I have not been able to find a definitive answer to my query. I possess a CMS API that supplies branding colors and other assets for a React application that can dynamically change its appearance using a combination of colo ...

cssreactjstailwind-css

Trouble with displaying class object array in Angular 5 using ngFor loop

I am attempting to loop through an array of class objects to populate a dropdown menu in Angular 5. However, the dropdown menu is not showing any options and there are no errors appearing in the browser console. The object array is created based on this m ...

javascriptarraysangularngfor

CSS login validator immobilized

In my Visual Studio project, I am facing an issue with applying CSS to two requiredfield validators. I have tried using the following code: #vdtrUserLogin { top:65px; left:750; position:absolute} #vdtrPasswordLogin0 { top:65px; left:900; position:absolute ...

htmlcssvisual-studio

Manage Raspberry Pi through a local website

Seeking guidance on creating a system where pressing a button on a webpage triggers a signal to a raspberry pi. For example, clicking on button1 on my laravel-built website initiates operation1 on the raspberry pi side, which will be using a .Net App. An ...

html.nettcpraspberry-pi

Angular 2: How to Avoid Exceeding Maximum Call Stack Size with Eager Loading

I'm facing an issue with preloading all of my child route modules. In my root routing module, I have the following configuration: RouterModule.forRoot(appRoutes, { preloadingStrategy: AppCustomPreloader }) The structure of AppCustomPreloader is as f ...

angularrouteseager-loading

Populating table with information stored locally

Hello there, I am currently working on a journal project where I am facing an issue with the getItem function of localStorage. Whenever I add entries to the table and refresh the page, all the entries disappear except for one row with default input values ...

javascripthtmllocal-storage

Detecting changes in input text with Angular and Typescript

Searching for a straightforward and practical method to identify changes in my textfield has been challenging. Avoiding the use of (keypress) is necessary, as users may occasionally paste values into the field. The (onchange) event only triggers when the u ...

angulartypescriptonchangewatch

React splits the page and interrupts the scroll event listener

For some reason, my webpage has been split by the React.js library. When attempting to scroll down while hovering over the top navigation menu, scrolling becomes impossible. However, scrolling works fine when done on any other part of the screen. I' ...

javascripthtmlreactjs

What sets apart a search bar from a text field?

What distinguishes a searchbar from a textfield? Is there a way to eliminate the search icon in a searchbar? ...

angularnativescript