html - how to change the img element in css

Question

I am altering an website, there are a few picture element there, see below:

I want to make the above picture bigger, as it has a much larger resolution.

this is the code in the index.html file

<div class="col-lg-6 order-lg-last">
   <div class="gfx py-4">
       <img src="images/azalea/gfx-e.jpg" alt="gfx">
   </div>
</div>

So I found the img element in css file.

img { max-width: 100%; height: auto; }

if I changed the max-width to 150%, this pic does become bigger. But there are other picture using the same img element, they become bigger as well... which is not want I want...

How can I set up a css img element to be used only by this picture?

Thanks

Answer 1

Try using inline css (since you only want to change 1 image)

So , for this particular image, Change from

<img src="images/azalea/gfx-e.jpg" alt="gfx">

to

<img src="images/azalea/gfx-e.jpg" alt="gfx" style="max-width: 150%;">