Difference between revisions of "Zoom"
Jump to navigation
Jump to search
Zoom is Brain Learnin' Stuff. Yep!
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
This is a proof of concept | {{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> | <html> | ||
<style> | <style> | ||
.zoom { | .zoom { | ||
padding: 50px; | padding: 50px; | ||
background- | border: 5px solid hotpink; | ||
background-image: url("https://bloggin.space/images/aoc/aoc1.png"); | |||
background-position: center; | |||
background-size: cover; | |||
transition: transform .5s; /* Animation */ | transition: transform .5s; /* Animation */ | ||
width: | width: 350px; | ||
height: | 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> | <div class="zoom"></div> | ||
</html> | </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...
