I have a static element
<img src="whatever.jpg" /> when I hover it, I wish to scale it to become fullscreen, absolute positioned. Is this possible to do using just css?
- .element:hover {position: fixed; top:0; left: 0; right: 0; bottom: 0;}Jonas Grumann– Jonas Grumann2016-09-07 08:36:25 +00:00Commented Sep 7, 2016 at 8:36
- Do you wish to have a smooth transition or a simple style toggle?Seimen– Seimen2016-09-07 08:37:32 +00:00Commented Sep 7, 2016 at 8:37
- If you want it to be fullscreen with absolute position it depends on your HTML structure and more specifically the parent elements of the image. With fixed position as stated above it doesn't matter. Then I would courage you to think of the UI/UX. If on hover the image will be fullscreen how is the user going to see the page again since he or she will be hovering the image all the time while in the viewport. This means they should move mouse cursor out of the viewport to see the page again - not even mentioning full screen mode.thepio– thepio2016-09-07 08:39:34 +00:00Commented Sep 7, 2016 at 8:39
- As other people suggested, although this can be achieved with css (not perfectly), I suggest you use a jQuery plugin to make your images bigger. Here's a good one: jacklmoore.com/colorboxJonas Grumann– Jonas Grumann2016-09-07 08:42:48 +00:00Commented Sep 7, 2016 at 8:42
- If you change the image from static to absolute, what's going to happen to the layout of elements around that image?BoltClock– BoltClock2016-09-07 08:46:16 +00:00Commented Sep 7, 2016 at 8:46
Add a comment |
2 Answers
You can use position: absolute and change width and height to 100 vw/vh on hover but to get transition you need first to declare width and height of img.
body { margin: 0; padding: 0; } img { transition: all 0.3s linear; width: 200px; height: 150px; position: absolute; } img:hover { width: 100vw; height: 100vh; }<img src="http://placehold.it/350x150">
Comments
I might have used too many CSS properties, but that's merely so I can explain what happens.
// Normal status - without hover img { // Set the position relative to it's parent (body in this case) position: relative; // Automatically calculate distance between the top, left, right and bottom of the window top: auto; left: auto; right: auto; bottom: auto; // Static width/height width: 250px; height: 250px; } // Hovered status img:hover { // Force the image in an fixed position (not respecting other elements) position: fixed; // Make sure it aligns to all sides top: 0; bottom: 0; left: 0; right: 0; // Force it to have the height and width of the viewport (100%) width: 100vw; height: 100vh; } 2 Comments
Seimen
This will stretch the image in almost all cases because the viewport width and height aren't in the image's ratio.
roberrrt-s
@Simon i'm aware, it's exactly what OP requested though, unless he wishes for the aspect ratio to be respected. But that would give problems because resolutions differ for every user.