HTML/CSS - Display image in actual size in the center of the screen on hover, click to shrink again?-CodePudding

I'm making a few pages with text that references images. The images start all at the same width (e.g. 300px), but they're actually different sizes. I'd like it so that when the user hovers over (for desktop) or clicks on (for mobile) an image, it makes that image the original size (e.g. 600 x 400 pixels, with the maximum width the size of the screen) and in the center of the screen. Then if they hover off or click on the image it goes back to its usual size.

The purpose is so that I can have the small images that are referenced by the text all neat and tidy as thumbnails, which the user can view in full resolution at their choice.

This is what I've got so far

<html>
<head>
<meta charset="UTF-8">

<style>
@import url('https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap');
body {font-family: 'Open Sans', sans-serif;}
.im {
    width:300px;
    float:left;
    position:relative;
}
.im:hover {
    max-height: 100%;
    max-width: 100%;
    min-width: initial;
}
</style>

</head>
<body>

<p>Test hello</p>
<img class="im" src="Freedom.jpg" />


</body>
</html>

CodePudding user response：

If you want to make the image fit all the available space (and being cropped in case container and image have different aspect ratios) you can use object-fit: cover; width: 100%; height: 100%; on the .im:hover class. You will need to wrap the image inside a div with specified height and width (let's say 300px X 300px). I hope this is what you meant.

CodePudding user response：

With JavaScript you can alter anything in the DOM, including class and style attributes of HTML elements.

My suggestion would be to make a JavaScript functions that alter the class attribute. See https://www.w3schools.com/howto/howto_js_remove_class.asp for more info.

function focus() {
    // ...
}
function unfocus() {
    // ...
}

And create a CSS class that styles your image how you want it when focused. This would do as you mentioned:

.focused {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Then use the event listener attributes on your image to run the functions which will add/remove the CSS class from the image element.

<img onmouseover="focus" onclick="unfocus">

CodePudding user response：

You can make the image take up as much of the viewport as it can by putting it in a div which has the thumbnail size when not being hovered and goes above everything else using z-index and takes on width and height of the viewport on hover.

The image is always centered in its parent and with object-fit contain will always be completely visible. (Use cover on the thumbnail that isn't being hovered instead if you want all the thumbnails to look the same size).

@import url('https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
}

div {
  width: 300px;
  float: left;
  position: relative;
}

.im {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

div:hover {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
}

<p>Test hello</p>
<div>
  <img class="im" src="https://picsum.photos/id/1015/2000/3000" />
</div>

CodePudding user response：

One of many possibilities would be easy with onm ouseover and onm ouseout. Putting the image in the middle is then only css.

<img src="https://via.placeholder.com/800x600" width="150" height="100" name="image_name"
onmouseover="image_name.width='800';image_name.height='600';"
onmouseout="image_name.width='150';image_name.height='100';" />