Want to change height width on img:hover in inline CSS

Question

I am working with dynamic template where HTML code generated from Back-end(using typescript as back-end). I want to write inline css on hover. Already written this code but does not work it.

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%;">

Any help would be appreciated.

Possible duplicated of https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css — Sergiu Molnar, Oct 01 '19 at 05:56
Why would you want to do this? This will unnecessarily complicate the `html`. I would suggest making a `css` class to handle this. — shaktimaan, Oct 01 '19 at 05:56
It's dynamic template that generated from back-end. So CSS class does not instantly work here. — Majedur, Oct 01 '19 at 06:00
In that case, as mentioned in the answer tagged by @SergiuMolnar you should handle this in `typescript`. — shaktimaan, Oct 01 '19 at 06:03
Possible duplicate of https://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles — giuseppedeponte, Oct 01 '19 at 06:11
hi will you please let me know what you want to do on hover, like you want to show some text on image hover, any way for inline hover css use jQuery or javascript Example : https://www.geeksforgeeks.org/how-to-write-ahover-in-inline-css/ — Front End Coder, Oct 01 '19 at 06:22
(mouseover)="method()" should be used. You can't is the answer. Possible duplicate of https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css — Mahi, Oct 01 '19 at 06:23
Possible duplicate of [How to write a:hover in inline CSS?](https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css) — Mahi, Oct 01 '19 at 06:24
People are arguing about how to apply the hover, but the real issue here is that you're misusing Angular. You're not supposed to get HTML from the backend and display it with SPAs. If you want to do that, go to something like JEE or PHP. — , Oct 01 '19 at 06:41

Eliseo · Accepted Answer · 2019-10-01T06:54:43.927

0

Updated thanks to comment of Maryannah

there a problem that [ngStyle] not admit in-line an object

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

A way is using museover mouse out, a variable and [style.propertie], some like

<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>

The other the answer of Maryannah

edited Oct 01 '19 at 06:54

answered Oct 01 '19 at 06:42

Eliseo

50,109
4
29
67

You can put it inline. – Oct 01 '19 at 06:49
@Maryannah, can you give me an example? (It's not ironic, really I like know how) – Eliseo Oct 01 '19 at 06:51
Sorry, I don't saw your answer ::glups:: – Eliseo Oct 01 '19 at 06:52
Strange ... Well the code is thin : `
`
– Oct 01 '19 at 06:53
Just remembered there's no hover hook, so that would instead be `
` (but still inline)
– Oct 01 '19 at 06:56
@Eliseo it's really closed to solve. I am now just facing multiple image over effect on single image hover. Help me please. – Majedur Oct 01 '19 at 06:56
I think that, then the better aproach is using Angular animations, but this has nothing about put inline style – Eliseo Oct 01 '19 at 08:07

score 0 · Answer 2 · 2019-10-01T06:56:11.833

0

To put it inline (might be ugly but hey, you asked for it)

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

This simply is

On hover, programmatically change the style of the view child element

edited Oct 01 '19 at 06:56

answered Oct 01 '19 at 06:51

Want to change height width on img:hover in inline CSS

2 Answers2