HEADING 2
Sed, ea pariatur, dolore tempor. Deserunt in quis ut dolor pariatur dolore minim aute. Sint, duis sit reprehenderit esse pariatur sed consequat dolore, deserunt eiusmod mollit aliqua et enim. Lorem sed anim nostrud eu in do sed amet elit esse in.Dolor amet sit ea ad deserunt irure. Fugiat, qui, do adipisicing nisi
This code goes into the Website HTML
Head. Each object that is to be scaled-
up/enlarged is given the name of
htmlclass=”zoom”.
<style>
.zoom {
transition: 1s ease-in-out;
}
.zoom:hover {
transform: scale(1.5);
}
</style>
Laboris aliquip dolore ullamco lorem, sed
non minim ipsum culpa reprehenderit in
aliqua, sint qui in labore ea. Minim aliqua,
mollit minim et occaecat adipisicing velit id
adipisicing ad labore et cupidatat consequat,
irure fugiat, esse sit. Dolore enim voluptate
do non sed cillum amet qui elit dolore sunt,
in ut. Velit cupidatat in ipsum excepteur.
Ullamco in dolore irure sunt elit labore esse
pariatur eiusmod laboris in ea cillum mollit.
HEADING 2
Sed, ea pariatur, dolore tempor. Deserunt in quis ut dolor pariatur dolore minim aute. Sint, duis sit reprehenderit esse pariatur sed consequat dolore, deserunt eiusmod mollit aliqua et enim. Lorem sed anim nostrud eu in do sed amet elit esse in.Dolor amet sit ea ad deserunt irure. Fugiat, qui, do adipisicing nisi
required for an innerZoom
Sunt dolor ipsum cillum in, mollit adipisicing in enim
magna in est. Velit esse, pariatur sint qui laboris? Irure ad
sint eiusmod occaecat anim pariatur, quis adipisicing sit
fugiat. Culpa sit, duis mollit dolore. Incididunt sint pariatur.
For the above inner-zoom option, as it uses JQuery, a ‘name’ UsesJQuery is
required. Each photo where an inner zoom is required is given a name of
htmlclass=”inzoom”. The code below should be added to the Website HTML with
the style placed in the Head and the script placed in the Body. Code courtesy of
Acorn.
<style>
.innerZoom {
background-size: 100%;
background-position: center center;
transition: all 1s ease-in-out;
}
.innerZoom:hover {
background-repeat: no-repeat;
background-size: 110%;
}
</style>
<script>
$('.inzoom').each( function(){
$(this).replaceWith('<div class="xr_noreset " style="position: absolute; ' +
$(this).attr("style") + '"><div class="innerZoom" style="background-image:url(' +
$(this).attr("src") + '); width: 100%; height: 100%;"></div></div>');
});
</script>
Zoom In and Out Examples
Text area given the name “htmlclass=”overlay” - the text
area must cover the image - spaces have been used as
padding above and below the image such that there is at
least one character on every on every line. Likely need to
adjust font sizes to get an exact fit, but thereafter, it is an
easy-to-use template.
<style>
.overlay {
opacity: 0;
transition: 1200ms;
}
.overlay:hover {
background-color: #948892;
opacity: 0.6;
}
</style>
Text area given the name “slide-up” - the MouseOver has the effect of
moving the border upwards - in this case the the text has height of 80px,
the image a height of 300px, and the border is moved upwards by 220px.
This is an experimental widget courtesy of Acorn.
<style>
.slide-up {
border-top: 300px solid transparent;
background-image: linear-gradient(to top, #948892, 100%, transparent);
background-repeat: no-repeat;
transform: translateY(-220px);
opacity: 0;
transition: 1200ms ease-in-out;
}
.slide-up:hover {
border-top: 235px solid transparent;
opacity: 1;
}
</style>
highslide -Zoom
enlarge Zoom
inner Zoom
enlarge Zoom