I have an image that I want to expand once clicked on. I have it with the code looking like this:
.siteFeatures { display: flex; flex-wrap: wrap; } .siteFeatures div { display: inline-block; } .feature { margin: 5px; } .siteFeatures input[type=checkbox] { display: none; } .siteFeatures img { height: 10rem; transition: transform 0.25s ease; transform-origin: top left; cursor: zoom-in; } .siteFeatures input[type=checkbox]:checked ~ label > img { transform: scale(3); transform-origin: top left; cursor: zoom-out; }<div class="siteFeatures"> <div class="feature teamRandomizerFeature"> <p>Randomize Teams!</p> <input type="checkbox" id="zoomCheckRandomizer"> <label for="zoomCheckRandomizer"> <img src="https://www.pokemondatabase.net/images/general/teamRandomizer.png"> </label> </div> <div class="feature typeEvaluator"> <p>Lookup Type Combinations!</p> <input type="checkbox" id="zoomCheckTypingEvaluator"> <label for="zoomCheckTypingEvaluator"> <img src="https://www.pokemondatabase.net/images/general/typingEvaluator.png"> </label> </div> <div class="feature eggGroupEvaluator"> <p>Lookup Egg Group Combinations!</p> <input type="checkbox" id="zoomCheckEggGroupEvaluator"> <label for="zoomCheckEggGroupEvaluator"> <img src="https://www.pokemondatabase.net/images/general/eggGroupEvaluator.png"> </label> </div> </div>As you can see with the example, the image goes past the window border. I need the image to stay within that border, though still able to expand until it's width is 100%.
