Difference between revisions of "Zoom"
Jump to navigation
Jump to search
Zoom is Brain Learnin' Stuff. Yep!
(Created page with "<style> .zoom { padding: 50px; background-color: green; transition: transform .2s; →Animation: width: 200px; height: 200px; margin: 0 auto; } .zoom:hover { transform: scale(1.5); →(150% zoom - Note: if the zoom is too large, it will go outside of the viewport): } </style> <div class="zoom"></div>") |
|||
| (7 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{DISPLAYTITLE:<font face="courier"><font color="hotpink">zoom</font></font>}} | |||
This is a proof of concept showing how the html/css '''Zoom''' function within mediawiki can work. Additionally, the image is surrounded with a 5 pixel [[Colors|'''hot pink''']] border for shits and giggles. | |||
Hover the image to see the '''Zoom''' effect... | |||
<br><br> | |||
<html> | |||
<style> | <style> | ||
.zoom { | .zoom { | ||
padding: 50px; | padding: 50px; | ||
background- | border: 5px solid hotpink; | ||
transition: transform . | background-image: url("https://bloggin.space/images/aoc/aoc1.png"); | ||
width: | background-position: center; | ||
height: | background-size: cover; | ||
transition: transform .5s; /* Animation */ | |||
width: 350px; | |||
height: 150px; | |||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
.zoom:hover { | .zoom:hover { | ||
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ | transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport. you can use other numbers to increase or decrease the zoom) */ | ||
} | } | ||
</style> | </style> | ||
<div class="zoom"></div> | |||
</html> | |||
{{Brains}} | |||
[[Category:Help]] | |||
Latest revision as of 03:21, 8 March 2025
This is a proof of concept showing how the html/css Zoom function within mediawiki can work. Additionally, the image is surrounded with a 5 pixel hot pink border for shits and giggles.
Hover the image to see the Zoom effect...
