Change size of an image appearing by hovering over text css

I have a text on which when you hover (or when you click on it on mobile), a picture appear. I used this stackoverflow answer to make it work.

I'm now trying to make the picture change size automatically, so the picture fit both on mobile and computer.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

a.hovertext1:after {
  content: 'Text that appears before I hover.';
}

a.hovertext1:hover:after,
a.hovertext1:focus:after {
  content: url(https://cdn.discordapp.com/attachments/1074330512925143102/1076897722075971675/5226579-le-drapeau-national-de-la-republique-federative-du-bresil-fond-d-ecran-du-drapeau-bresilien-avec-des-styles-de-degrade-d-ombre-gratuit-vectoriel.jpg);
  display: block;
}

<!-- language: lang-html -->

<a name="return1" id="return1"></a>
<a href="#return1" class="hovertext1"></a>

<!-- end snippet -->

I know I need to add width:100%; somewhere in my code, but I have no idea where. I tried putting it in the a.hovertext1:focus:after{...} block, but it didn't do anything.

Hope someone can help me!

Is there any reason for which you want to use pseudo elements ? There is a different approach using simple display property on hover.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

img {
  display: none;
  width: 100%;
}

a:hover + img {
  display: block;
}

a:hover {
  display: none;
}

<!-- language: lang-html -->

<a href="#">Text that appears before I hover</a>
<img class="img" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" />

<!-- end snippet -->

Also I suggest to use buttons instead of links. Buttons are used for actions that affect the website’s front-end; links are used for navigation and actions that don’t affect the website.