HTML/CSS: Show full size image on click

Question

I have a text + image side by side, and I want a function where the user can click on the image to make it bigger. I'm new to HTML/CSS so I was wondering how I can approach this. Thanks! (demo -> https://jsfiddle.net/DTcHh/6634/)

Is there any way to do this with pure HTML/CSS and no javascript?

The ones I found have been telling me to use javascript such as:

 <script type="text/javascript">
        function showImage(imgName) {
            document.getElementById('largeImg').src = imgName;
            showLargeImagePanel();
            unselectAll();
        }
        function showLargeImagePanel() {
            document.getElementById('largeImgPanel').style.visibility = 'visible';
        }
        function unselectAll() {
            if(document.selection) document.selection.empty();
            if(window.getSelection) window.getSelection().removeAllRanges();
        }
        function hideMe(obj) {
            obj.style.visibility = 'hidden';
        }
        </script>

Is there a simpler way to do this in HTML/CSS?

Answer 1

You could use a CSS pseudo-class to change the styling when, for example, the mouse is over the image:

img:hover {
  width: 300px;
  height: 300px;
}

Generally, though, to add interactivity to your web pages, you will have to become acquainted with JavaScript. I don't know of any way to toggle a state (e.g. "zoomed-in") without the use of JavaScript.

You can think of the HTML as defining the content, the CSS as defining how it looks, and the JavaScript as defining how it behaves.