Difference between revisions of "Zoom"
Jump to navigation
Jump to search
Zoom is Brain Learnin' Stuff. Yep!
| Line 1: | Line 1: | ||
This is a proof of concept | This is a proof of concept showing how the html/css '''Zoom''' function within mediawiki can work. | ||
Hover the image to see the '''Zoom''' effect... | |||
<html> | <html> | ||
<head> | <head> | ||
| Line 7: | Line 10: | ||
padding: 50px; | padding: 50px; | ||
background-color: green; | background-color: green; | ||
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]] | |||
Revision as of 03:05, 8 March 2025
This is a proof of concept showing how the html/css Zoom function within mediawiki can work.
Hover the image to see the Zoom effect...
