<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jack Moskovita's Mountains, Lakes, Wildlife & Birds Photographer</title>
<base href="http://www.moskovita-photography.com/">
>
<meta name="Wildlife, Birds, Nature, Mountain and Landscape Photography by Jack Moskovita" content="Wildlife, Birds, Nature, Mountains, Landscapes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
--body-bg: url(2017-MtAdams_TahklakhLake_Sunrise-1920px.jpg);
}
/* background image to cover viewport */
.bodybg:after {
content: "";
position: fixed;
z-index: 0;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: no-repeat 50% 50%;
background-size: cover;
/* Use cover here not contain */
background-image: url(2017-MtAdams_TahklakhLake_Sunrise-1920px.jpg);
/* fallback*/
background-image: var(--body-bg);
filter: blur(7px);
transition: .5s ease;
}
.wrap {
position: relative;
max-width: 930px;
margin: auto;
z-index: 2;
transition: 1s ease;
opacity: 1;
}
/* end test */
/* lets add box sizing and some defaults to make things easier.*/
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
-webkit-text-size-adjust: 100%;
/* stop ios zooming text on orientation change */
text-size-adjust: 100%;
line-height: 1.5;
}
/* common styling */
html,
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
text-align: center;
font-size: 3em;
color: #5a40ff;
text-shadow: 1px 1px #fff;
}
a {
color: #fff;
}
a:hover {
text-decoration: none;
}
a:visited {
color: #fff;
}
.mast {
margin: 0 auto;
border: 2px solid #000;
max-width: 930px;
background: #000;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);
}
.mast img {
width: 100%;
display: block;
height: auto;
/* Erik had max-height if you don't mind the jump*/
max-height: 700px;
/*max height the image can use */
object-fit: contain;
/* contain keeps the ratio in avaiable space */
outline: 1px solid #fff;
}
@media screen and (min-width: 981px) {
/* I prefer a fixed height on the mast or page jumps up and down each time */
.mast img {
height: 522px;
}
}
/* slides styling */
.photo {
max-width: 930px;
position: relative;
margin: 0 auto;
}
.photo ul.topic {
padding: 0;
margin: 0;
list-style: none;
position: relative;
text-align: center;
z-index: 10;
white-space: nowrap;
min-height: 0;
}
.photo ul.topic li span.set {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
/* aligns text within the text node flex item */
font-size: 11px;
line-height: 1;
min-height: 30px;
font-weight: 900;
color: #000;
border: solid #fff;
border-width: 1px 1px 0 0;
background: #ccc;
font-family: verdana, arial, sans-serif;
padding: 0 2px;
position: absolute;
top: -31px;
width: 18%;
box-sizing: border-box;
}
.photo ul.topic li span.set br {
display: none;
}
@media screen and (max-width: 980px) {
.mast img {
height: auto;
}
.photo ul.topic li span.set br {
display: block;
}
}
.photo ul.topic>li:nth-child(1) span.set {
left: 0;
}
.photo ul.topic>li:nth-child(2) span.set {
left: 18%;
}
.photo ul.topic>li:nth-child(3) span.set {
left: 36%;
width: 24%;
}
.photo ul.topic>li:nth-child(4) span.set {
left: 60%;
}
.photo ul.topic>li:nth-child(5) span.set {
left: 78%;
width: 22%;
}
/* topic galleries */
.photo ul.topic li ul {
display: none;
white-space: normal;
list-style: none;
padding: 0;
margin: 31px 0 0;
padding: 10px 15px 15px;
flex-wrap: wrap;
border: 2px solid #bbb;
}
.photo ul.topic li.active span {
color: #000;
background: #bbb;
}
.photo ul.topic li:hover span {
color: #fff;
background: #999;
}
.photo ul.topic li.active ul {
display: block;
background: #ddd;
border-color: #bbb;
z-index: 1;
}
/*
.photo ul.topic:hover li.active ul {
display: none;
}
.photo ul.topic:hover li.active:hover ul {
display: block;
}
.photo ul.topic li:hover ul {
display: block;
border-color: #999;
z-index: 10;
}
*/
.photo ul.topic li ul li {
display: inline-block;
width: 122px;
height: 97px;
float: none;
border: 1px solid #fff;
margin: 1px;
}
.photo ul.topic li ul li a {
display: block;
float: left;
width: 122px;
height: 97px;
padding: 5px;
cursor: default;
text-decoration: none;
background: #eee;
border: 1px solid #888;
}
.photo ul.topic li ul li a img {
display: block;
width: 108px;
height: 83px;
transition: 0.3s ease;
pointer-events: none;
}
/* image zoom */
.photo ul.topic li:hover ul li a:hover {
white-space: normal;
position: relative;
z-index: 100;
}
.photo ul.topic li:hover ul li a:hover img {
position: absolute;
/*left: -40px;
top: -22px;
width: 200px;
height: 150px;*/
transform: scale(1.7);
border: 5px solid #888;
cursor: pointer;
pointer-events: auto;
}
/* CSS tool-tip for image descriptions */
a[data-alt] {
position: relative;
}
a[data-alt]::before {
position: absolute;
top: -32px;
left: 32px;
/* the margin-left position refers to current parent */
margin-left: -58%;
/* moves clicked mast image text out of viewport */
z-index: -1;
/* hides the data-alt description under current stack */
opacity: 0;
transform: scale(.5) translateY(0);
transition: none;
border: 1px solid #000;
border-radius: 5px;
padding: 4px 6px;
width: 160px;
background: #ffc;
color: #000;
text-align: left;
font: message-box;
line-height: 1;
pointer-events: none;
content: attr(data-alt);
}
a[data-alt]:focus::before,
a[data-alt]:hover::before {
z-index: 1;
opacity: 0.9;
transition: transform 0.3s ease, opacity 0.3s ease;
transform: scale(1) translateY(-100%);
}
a[data-alt]:focus::before {
transform: scale(.6) translateY(100%);
}
/* navigation */
.button {
background-color: #5a40ff;
border: none;
color: white;
padding: 10px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
margin: 4px 2px;
cursor: pointer;
}
.navrow-top {
text-align: center;
text-transform: uppercase;
margin: 1rem 0;
}
.navrow-base {
text-align: center;
margin: 1rem 0;
}
.sig {
text-align: center;
font-weight: bold;
margin: 1rem 0;
font-family: Verdana, Tahoma;
font-size: 1rem;
}
/* extras*/
.blur {
filter: blur(0);
animation: blur 1s forwards;
}
@keyframes blur {
0% {
filter: blur(0);
opacity: 1;
}
50% {
filter: blur(12px);
opacity: 0.4;
}
100% {
filter: blur(0);
opacity: 1;
}
}
/* allow mobile to just scroll sideways as its too awkward to go up and down and still see the image */
@media screen and (max-width: 678px) {
.photo ul.topic li.active ul,
.photo ul.topic:hover li.active:hover ul {
display: flex;
overflow: auto;
overflow-y: scroll;
/* has to be scroll, not auto for ios */
-webkit-overflow-scrolling: touch;
padding: 35px 20px 45px 55px;
flex-wrap: nowrap;
}
a[data-alt]:focus::before,
a[data-alt]:hover::before {
transform: translate(-85%, 100%);
}
li:first-child>a[data-alt]:focus::before,
li:first-child>a[data-alt]:hover::before {
transform: translate(70%, 100%);
}
h1 {
font-size: 1.5em;
padding: 10px 0;
}
.photo ul.topic li span.set {
font-size: 10px;
}
.photo ul.topic>li.active {
position: relative;
}
.photo ul.topic>li.active:after {
content: "";
position: absolute;
right: 2px;
top: 2px;
bottom: 2px;
width: 70px;
background: linear-gradient(270deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 100%);
z-index: 999;
opacity: 0.8;
pointer-events: none;
}
.photo ul.topic>li.active ul:after {
content: "\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 ";
display: inline-block;
width: 100px;
height: 100px;
}
}
main {
padding-top: 1rem;
}
.footer {
background: rgba(255, 255, 255, 0.5);
max-width: 930px;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<div class="bodybg"></div>
<div class="wrap">
<h1>MOSKOVITA PHOTOGRAPHY</h1>
<div class="mast">
<img id="mastImage" src="2017-MtAdams_TahklakhLake_Sunrise-1920px.jpg" alt="Takhlakh Lake - Mt Adams, Sunrise at Takhlakh Lake under Mt Adams" width="1920" height="1080">
</div>
<main>
<div class="photo">
<ul class="topic">
<li><span class="set">BALD <br>EAGLES</span>
<ul>
<li><a href="April16-3-800.jpg" data-alt="Bald Eagles landing on branches"><img src="double-landing-nesting-eagles-1200.jpg" alt="Bald Eagles landing on branches" /></a></li>
<li><a href="May10-BaldEagle6-web.jpg" data-alt="Bald Eagle flight at Point Defiance, Tacoma"><img src="May10-BaldEagle6-web.jpg" alt="Bald Eagle flight at Point Defiance, Tacoma" /></a></li>
<li><a href="May10-BaldEagle2-web.jpg" data-alt="Bald Eagle flight"><img src="May10-BaldEagle2-web.jpg" alt="Bald Eagle flight" /></a></li>
<li><a href="_1orcaEagles13a-800.jpg" data-alt="Bald Eagle at Orca Island"><img src="_1orcaEagles13a-800.jpg" alt="Bald Eagle at Orca Island" /></a></li>
<li><a href="May13eagles-800.jpg" data-alt="Nesting female Bald Eagle and Eaglete"><img src="May13eagles-800.jpg" alt="Nesting female Bald Eagle and Eaglete" /></a></li>
<li><a href="Sept1YachtClubEagle2-800.jpg" data-alt="Bald Eagle and flag at Tacoma Yatch Club"><img src="Sept1YachtClubEagle2-800.jpg" alt="Bald Eagle and flag at Tacoma Yatch Club" /></a></li>
<li><a href="March1eagles6a-800.jpg" data-alt="Bald Eagle mates screaming"><img src="March1eagles6a-800.jpg" alt="Bald Eagle mates screaming" /></a></li>
<li><a href="April10eagles1a-800.jpg" data-alt="Bald Eagle landing in nest"><img src="April10eagles1a-800.jpg" alt="Bald Eagle landing in nest" /></a></li>
<li><a href="_June6eagles-800.jpg" data-alt="Bald Eagle taking off from top of tree"><img src="_June6eagles-800.jpg" alt="Bald Eagle taking off from top of tree" /></a></li>
<li><a href="EaglesMay8-2-800.jpg" data-alt="Immature Bald Eagle in flight"><img src="EaglesMay8-2-800.jpg" alt="Immature Bald Eagle in flight" /></a></li>
<li><a href="May10-BaldEagle10-web.jpg" data-alt="Bald Eagle on branch"><img src="May10-BaldEagle10-web.jpg" alt="Bald Eagle on branch" /></a></li>
<li><a href="TheCatch-800.jpg" data-alt="Bald Eagle fishing, The Catch by a Bald Eagle"><img src="TheCatch-800.jpg" alt="Bald Eagle fishing, The Catch by a Bald Eagle" /></a></li>
<li><a href="_1orcaEagles8-a-800.jpg" data-alt="Bald Eagle in flight"><img src="_1orcaEagles8-a-800.jpg" alt="Bald Eagle in flight" /></a></li>
<li><a href="26-orcaEagles-a-800.jpg" data-alt="Bald Eagle pair screaming"><img src="26-orcaEagles-a-800.jpg" alt="Bald Eagle pair screaming" /></a></li>
<li><a href="April3eagles2-800.jpg" data-alt="Female Bald Eagle on branch"><img src="April3eagles2-800.jpg" alt="Female Bald Eagle on branch" /></a></li>
<li><a href="April16-2-800.jpg" data-alt="Bald Eagle landing in tree"><img src="April16-2-800.jpg" alt="Bald Eagle landing in tree" /></a></li>
<li><a href="Feb17Eagle12-800.jpg" data-alt="Bald Eagle perching"><img src="Feb17Eagle12-800.jpg" alt="Bald Eagle Perching" /></a></li>
<li><a href="March31eagles1-800.jpg" data-alt="Bald Eagle in flight"><img src="March31eagles1-800.jpg" alt="Bald Eagle flight" /></a></li>
<li><a href="April1eagles4-800.jpg" data-alt="Bald Eagles screaming"><img src="April1eagles4-800.jpg" alt="Bald Eagles screaming" /></a></li>
<li><a href="April10eagles1b-800.jpg" data-alt="Bald Eagle landing in nest"><img src="April10eagles1b-800.jpg" alt="Bald Eagle landing in nest" /></a></li>
<li><a href="April16-4-800.jpg" data-alt="Bald Eagle landing"><img src="April16-4-800.jpg" alt="Bald Eagles landing" /></a></li>
</ul>
</li>
<li><span class="set">WILD<br>LIFE</span>
<ul>
<li><a href="Sept2016ElkBugling3-web.jpg" data-alt="Elk Bugling, Massive Bull Elk near Mt Rainier"><img src="Sept2016ElkBugling3-web.jpg" alt="Elk Bugling, Massive Bull Elk near Mt Rainier" /></a></li>
<li><a href="0WildAnimals.jpg" data-alt="Ram at Glacier National Park"><img src="0WildAnimals.jpg" alt="Ram at Glacier National Park" /></a></li>
<li><a href="Banff_Black_Bear2.jpg" data-alt="Black Bear in Banff, Alberta"><img src="Banff_Black_Bear2.jpg" alt="Black Bear in Banff, Alberta" /></a></li>
<li><a href="2mtrainierfox-800.jpg" data-alt="Fox in Mt Rainier National Park"><img src="2mtrainierfox-800.jpg" alt="Fox in Mt Rainier National Park" /></a></li>
<li><a href="RainierDeer-800.jpg" data-alt="Fawn among wildflowers"><img src="RainierDeer-800.jpg" alt="Fawn among wildflowers" /></a></li>
<li><a href="Banff_Bear-5.jpg" data-alt="Brown Bear, Banff, Alberta"><img src="Banff_Bear-5.jpg" alt="Brown Bear, Banff, Alberta" /></a></li>
<li><a href="RainierBadger-5-800.jpg" data-alt=" Badger in NW WA"><img src="RainierBadger-5-800.jpg" alt=" Badger in NW WA" /></a></li>
<li><a href="SkunkAug6-800.jpg" data-alt="Skunk in backyard"><img src="SkunkAug6-800.jpg" alt="Skunk in backyard" /></a></li>
<li><a href="6WildAnimals.jpg" data-alt="Wild Goats, Rocky Mountain Goats"><img src="6WildAnimals.jpg" alt="Wild Goats, Rocky Mountain Goats" /></a></li>
<li><a href="Oct11Elk7-800.jpg" data-alt="8x7 Bull Elk near Mt Rainier"><img src="Oct11Elk7-800.jpg" alt="8x7 Bull Elk near Mt Rainier" /></a></li>
<li><a href="Oct11Elk8-800.jpg" data-alt="Massive Bull Elk near Mt Rainier"><img src="Oct11Elk8-800.jpg" alt="Massive Bull Elk near Mt Rainier" /></a></li>
<li><a href="BullElk2014-800.jpg" data-alt="Several Bull Elks cooling off"><img src="BullElk2014-800.jpg" alt="Several Bull Elks cooling off" /></a></li>
<li><a href="8WildAnimals.jpg" data-alt="White Tail Deer in Blooms"><img src="8WildAnimals.jpg" alt="White Tail Deer in Blooms" /></a></li>
<li><a href="BlackBear2014b-800.jpg" data-alt="Black Bear marking his territory"><img src="BlackBear2014b-800.jpg" alt="Black Bear marking his territory" /></a></li>
<li><a href="Banff_Black_Bear1.jpg" data-alt="Black Bear in wildflowers"><img src="Banff_Black_Bear1.jpg" alt="Black Bear in wildflowers" /></a></li>
<li><a href="Dec10racoon1-800.jpg" data-alt="Racoon up a tree"><img src="Dec10racoon1-800.jpg" alt="Racoon up a tree" /></a></li>
<li><a href="7mtrainierfox-800.jpg" data-alt="Red Fox portrait"><img src="7mtrainierfox-800.jpg" alt="Red Fox portrait" /></a></li>
<li><a href="Feb8chippy1-800.jpg" data-alt="Squirrel in a tree"><img src="Feb8chippy1-800.jpg" alt="Squirrel in tree" /></a></li>
<li><a href="Banff_Black_Bear0-web.jpg" data-alt="Black Bear"><img src="Banff_Black_Bear0-web.jpg" alt="Black Bear" /></a></li>
<li><a href="Dec31coyotes-800.jpg" data-alt="Coyotes mates"><img src="Dec31coyotes-800.jpg" alt="Coyotes mates" /></a></li>
<li><a href="Dec31Bear4-800.jpg" data-alt="Black Bear taking a drink"><img src="Dec31Bear4-800.jpg" alt="Black Bear taking a drink" /></a></li>
</ul>
</li>
<li class="active"><span class="set">MOUNTAINS <br>& LAKES</span>
<ul>
<li><a href="CraterLake0-800.jpg" data-alt="OR, Crater Lake in the Summer"><img src="CraterLake0-800.jpg" alt="OR, Crater Lake in the Summer"></a></li>
<li><a href="CraterLake8.jpg" data-alt=" Crater Lake in Winter"><img src="CraterLake8.jpg" alt=" Crater Lake in Winter"></a></li>
<li><a href="ShuksanMtSunRise5-web.jpg" data-alt="Sunrise at Picture Lake below Shuksan Mt"><img src="ShuksanMtSunRise5-web.jpg" alt="Sunrise at Picture Lake below Shuksan Mt"></a></li>
<li><a href="ShuksanMtSunSet2-web.jpg" data-alt="Shuksan Mt at sunset"><img src="ShuksanMtSunSet2-web.jpg" alt="Shuksan Mt at sunset"></a></li>
<li><a href="4-Cascades-1k.jpg" data-alt="North Cascade Mountains"><img src="4-Cascades-1k.jpg" alt="North Cascade Mountains"></a></li>
<li><a href="IrynsCounsilLake5-web.jpg" data-alt="Mt Adams and Council Lake"><img src="IrynsCounsilLake5-web.jpg" alt="Mt Adams and Council Lake"></a></li>
<li><a href="MtHood3-web.jpg" data-alt="Fly fisherman at Trillium Lake under Mt Hood"><img src="MtHood3-web.jpg" alt="Fly fisherman at Trillium Lake under Mt Hood"></a></li>
<li><a href="0287b.jpg" data-alt="Bald Eagle flying at Takhlakh Lake under Mt Adams"><img src="0287b.jpg" alt="Bald Eagle flying at Takhlakh Lake under Mt Adams"></a></li>
<li><a href="+iryn2-800.jpg" data-alt="Looking toward Mt Shuksan"><img src="+iryn2-800.jpg" alt="Looking toward Mt Shuksan"></a></li>
<li><a href="Banff_2JackLake5-web.jpg" data-alt="Two Jack Lake, Banff National Park"><img src="Banff_2JackLake5-web.jpg" alt="Two Jack Lake, Banff National Park"></a></li>
<li><a href="ReflectionLake7-800.jpg" data-alt="Reflection Lake under Mt Rainier"><img src="ReflectionLake7-800.jpg" alt="Reflection Lake under Mt Rainier"></a></li>
<li><a href="Sequin_Horse_900pixels.jpg" data-alt="Clydesdales horse near Sequim"><img src="Sequin_Horse_900pixels.jpg" alt="Clydesdales horse near Sequim"></a></li>
<li><a href="Aug15moon1a-web.jpg" data-alt="Takhlakh Lake under Mt Adams, Moon over Mt Adams"><img src="Aug15moon1a-web.jpg" alt="Takhlakh Lake under Mt Adams, Moon over Mt Adams"></a></li>
<li><a href="MtBakerEagle1-800.jpg" data-alt="Baker Lake under Mt Baker"><img src="MtBakerEagle1-800.jpg" alt="Baker Lake under Mt Baker"></a></li>
<li><a href="MtHood2-web.jpg" data-alt="Trillium Lake under Mt Hood"><img src="MtHood2-web.jpg" alt="Trillium Lake under Mt Hood"></a></li>
<li><a href="RainierWildflowers15-800.jpg" data-alt="Reflection Lake below Mt Rainier"><img src="RainierWildflowers15-800.jpg" alt="Reflection Lake below Mt Rainier"></a></li>
<li><a href="1Hoodcanalolympusmounts2-800.jpg" data-alt="Olympic Mountains"><img src="1Hoodcanalolympusmounts2-800.jpg" alt="Olympic Mountains"></a></li>
<li><a href="IrynMtAdams2-web.jpg" data-alt="Overlooking Council Lake & Mt Adams"><img src="IrynMtAdams2-web.jpg" alt="Overlooking Council Lake & Mt Adams"></a></li>
<li><a href="0720-Tipsoo_Lake5-web.jpg" data-alt="Mt Rainier, Tipsoo Lake"><img src="0720-Tipsoo_Lake5-web.jpg" alt="Mt Rainier, Tipsoo Lake"></a></li>
<li><a href="10-27-19_Levee_Pond-2-web.jpg" data-alt="Mt Rainier, Pond"><img src="10-27-19_Levee_Pond-2-web.jpg" alt="Mt Rainier, Pond"></a></li>
<li><a href="DiamondCraterLake020.jpg" data-alt="Dimond Lake under Mt Baily"><img src="DiamondCraterLake020.jpg" alt="Dimond Lake under Mt Baily"></a></li>
</ul>
</li>
<li><span class="set">BIRDS</span>
<ul>
<li><a href="Oct12jay-800.jpg" data-alt="Stellar Jay on branch"><img src="Oct12jay-800.jpg" alt="Stellar Jay on branch" /></a></li>
<li><a href="BarnSwallows-1-800.jpg" data-alt="Barn Swallows feeding nesting babies"><img src="BarnSwallows-1-800.jpg" alt="Barn Swallows feeding nesting babies" /></a></li>
<li><a href="Jan27chickadee-800.jpg" data-alt="Black-capped Chickadee on branch"><img src="Jan27chickadee-800.jpg" alt="Black-capped Chickadee on branch" /></a></li>
<li><a href="April2016-2.jpg" data-alt="Red-winged Blackbird singing on branch"><img src="April2016-2.jpg" alt="Red-winged Blackbird singing on branch" /></a></li>
<li><a href="WapatoLakeOsprey8-web.jpg" data-alt=" Osprey with fish"><img src="WapatoLakeOsprey8-web.jpg" alt=" Osprey with fish" /></a></li>
<li><a href="StellarJay1-800.jpg" data-alt="Scrub Jay landing"><img src="StellarJay1-800.jpg" alt="Scrub Jay landing" /></a></li>
<li><a href="2088a_NR-web.jpg" data-alt="Pileated Woodpecker"><img src="2088a_NR-web.jpg" alt="Pileated Woodpecker" /></a></li>
<li><a href="MtAdamsOsprey25-web.jpg" data-alt="Osprey with fish"><img src="MtAdamsOsprey25-web.jpg" alt="Osprey with fish" /></a></li>
<li><a href="GoldenEagle1-800.jpg" data-alt="Golden Eagle Portrait"><img src="GoldenEagle1-800.jpg" alt="Golden Eagle Portrait" /></a></li>
<li><a href="CraterLake13.jpg" data-alt="Grey Jay in flight at Crater Lake"><img src="CraterLake13.jpg" alt="Grey Jay in flight at Crater Lake" /></a></li>
<li><a href="Mowich_Lake_Grey_Jays-web.jpg" data-alt="Grey Jay at Mt Rainier"><img src="Mowich_Lake_Grey_Jays-web.jpg" alt="Grey Jay at Mt Rainier" /></a></li>
<li><a href="StellarJay3-800.jpg" data-alt="Stellar Jay at Mt Rainier"><img src="StellarJay3-800.jpg" alt="Stellar Jay at Mt Rainier" /></a></li>
<li><a href="0May29yellowfinch-800.jpg" data-alt="Yellow Finch eating berries"><img src="0May29yellowfinch-800.jpg" alt="Yellow Finch eating berries" /></a></li>
<li><a href="aWinterTowhee-800.jpg" data-alt="Spotted Towhee in winter"><img src="aWinterTowhee-800.jpg" alt="Spotted Towhee in winter" /></a></li>
<li><a href="Sept25licker2-800.jpg" data-alt="Northern Flick Portrait"><img src="Sept25licker2-800.jpg" alt="Northern Flick Portrait" /></a></li>
<li><a href="Oct11owl-800.jpg" data-alt="Snowy Owl at Mt Rainier"><img src="Oct11owl-800.jpg" alt="Snowy Owl at Mt Rainier" /></a></li>
<li><a href="aJayWinter-800.jpg" data-alt="Scrub Jay in winter"><img src="aJayWinter-800.jpg" alt="Scrub Jay in winter" /></a></li>
<li><a href="CraterLake16.jpg" data-alt="Grey Jay in snow"><img src="CraterLake16.jpg" alt="Grey Jay in snow" /></a></li>
<li><a href="Dec29owl-800.jpg" data-alt="Great Horned Owl"><img src="Dec29owl-800.jpg" alt="Owl Portrait" /></a></li>
<li><a href="_aGeese-800.jpg" data-alt="Canadian Geese family"><img src="_aGeese-800.jpg" alt="Canadian Geese family" /></a></li>
<li><a href="Aug31tacomaGeese-web.jpg" data-alt="Geese family flight"><img src="Aug31tacomaGeese-web.jpg" alt="Geese family flight" /></a></li>
</ul>
</li>
<li><span class="set">HUMMING<br>BIRDS</span>
<ul>
<li><a href="6june8hummer-800.jpg" data-alt="Male Rufous Hummingbird in flight at blooms"><img src="6june8hummer-800.jpg" alt="Male Rufous Hummingbird in flight at blooms" /></a></li>
<li><a href="1+hummerOct6a-800.jpg" data-alt="Male Anna Hummingbird in flight"><img src="1+hummerOct6a-800.jpg" alt="Male Anna Hummingbird in flight" /></a></li>
<li><a href="SpringAnnaApril27-800.jpg" data-alt="Male Anna Hummingbird on Spring blooming tree"><img src="SpringAnnaApril27-800.jpg" alt="Male Anna Hummingbird on Spring blooming tree" /></a></li>
<li><a href="5-1-Rufous-800.jpg" data-alt="Male Rufous Hummingbird on branch"><img src="5-1-Rufous-800.jpg" alt="Male Rufous Hummingbird on branch" /></a></li>
<li><a href="Jan20hummer2-800.jpg" data-alt="Male Anna Hummingbird in flight"><img src="Jan20hummer2-800.jpg" alt="Male Anna Hummingbird in flight" /></a></li>
<li><a href="1June11hummer-800.jpg" data-alt="Female Rufous Hummingbird at flowers"><img src="1June11hummer-800.jpg" alt="Female Rufous Hummingbird at flowers" /></a></li>
<li><a href="RufousSept2011-800.jpg" data-alt="Female Rufous Hummingbird and wasp"><img src="RufousSept2011-800.jpg" alt="Female Rufous Hummingbird and wasp" /></a></li>
<li><a href="1Dec28hummer-800.jpg" data-alt="Male Humminbird on branch"><img src="1Dec28hummer-800.jpg" alt="Male Humminbird on branch" /></a></li>
<li><a href="Jan15hummer2-800.jpg" data-alt="Anna Hummingbird in flight"><img src="Jan15hummer2-800.jpg" alt="Anna Hummingbird in flight" /></a></li>
<li><a href="Jan19hummer1-800.jpg" data-alt="Hummingbird at flower"><img src="Jan19hummer1-800.jpg" alt="Hummingbird at flower" /></a></li>
<li><a href="Feb15hummers3-800.jpg" data-alt="Hummingbird at flower"><img src="Feb15hummers3-800.jpg" alt="Hummingbird at flower" /></a></li>
<li><a href="Nov11hummer2-800.jpg" data-alt="Male Anna Hummingbird on branch"><img src="Nov11hummer2-800.jpg" alt="Male Anna Hummingbird on branch" /></a></li>
<li><a href="2June20hummers2-800.jpg" data-alt="Anna and Rufous Hummingbirds fighting"><img src="2June20hummers2-800.jpg" alt="Anna and Rufous Hummingbirds fighting" /></a></li>
<li><a href="4June17hummer-800.jpg" data-alt="Female Rufous Hummingbird catching an insect"><img src="4June17hummer-800.jpg" alt="Female Rufous Hummingbird catching an insect" /></a></li>
<li><a href="May27anna2-800.jpg" data-alt="Female Rufous Hummingbird at flower"><img src="May27anna2-800.jpg" alt="Female Rufous Hummingbird at flower" /></a></li>
<li><a href="5-9-Rufous-2-800.jpg" data-alt="Male Rufous Hummingbird at flower"><img src="5-9-Rufous-2-800.jpg" alt="Male Rufous Hummingbird at flower" /></a></li>
<li><a href="Jan16hummer-800.jpg" data-alt="Anna's Hummingbird perching"><img src="Jan16hummer-800.jpg" alt="Anna's Hummingbird perching" /></a></li>
<li><a href="SnowHummerNov22-800.jpg" data-alt="Anna's Hummingbird in snow"><img src="SnowHummerNov22-800.jpg" alt="Anna's Hummingbird in snow" /></a></li>
<li><a href="5-1-Rufous-800.jpg" data-alt="Rufous Hummingbird perching"><img src="5-1-Rufous-800.jpg" alt="Rufous Hummingbird perching" /></a></li>
<li><a href="5-9-Rufous-6-800.jpg" data-alt="Rufous Hummingbird at flower"><img src="5-9-Rufous-6-800.jpg" alt="Rufous Hummingbird at flower" /></a></li>
<li><a href="aWinterHummer00-800.jpg" data-alt="Rufous Hummingbird in ice storm"><img src="aWinterHummer00-800.jpg" alt="Rufous Hummingbird in ice storm" /></a></li>
</ul>
</li>
</div>
<nav class="navrow-top">
<a href="https://moskovita-photography.com/Bald_Eagles.htm" class="button">Bald Eagles ></a>
<a href="https://moskovita-photography.com/Wildlife.htm" class="button">Wildlife ></a>
<a href="https://moskovita-photography.com/Mountain.htm" class="button">Mountains ></a>
<a href="https://moskovita-photography.com/Birds.htm" class="button">Birds ></a>
<a href="http://www.moskovita-photography.com/Anna_Rufous_Hummingbirds.htm" class="button">Humming Birds ></a>
</nav>
<nav class="navrow-base">
<a href="https://moskovita-photography.com/New_Website-gallery.htm" class="button">More Galleries</a>
<a href="https://moskovita-photography.com/Jacks__Blog.htm" class="button">Blogs</a>
<a href="https://moskovita-photography.com/Christmas_NW.htm" class="button">NW Christmas</a>
<a href="https://moskovita-photography.com/about.htm" class="button">About</a>
<a href="http://www.moskovita-photography.com/stock_photography.htm" class="button">Original Website</a>
</nav>
<p class="sig">© Jack Moskovita Photography</p>
</footer>
</wrap>
</main>
<script>
(function(d) {
"use strict";
const allImages = d.querySelectorAll("[data-alt] img");
const allAnchors = d.querySelectorAll("[data-alt]");
const mastImage = d.querySelector("#mastImage");
var bodyBg = "";
// mobile IOS is still following links on the anchors so lets remove the destination
for (let i = 0; i < allAnchors.length; i++) {
allAnchors[i].setAttribute("href", "#nogo");
}
for (let i = 0; i < allImages.length; i++) {
allImages[i].addEventListener("click", function(e) {
mastImage.classList.remove("blur");
void mastImage.offsetWidth; //trigger reflow to start keyframe
mastImage.classList.add("blur");
mastImage.src = allImages[i].src;
mastImage.setAttribute("alt", allImages[i].getAttribute("alt"));
allImages[i].parentNode.blur();
bodyBg = "url(" + allImages[i].src + ")";
document.documentElement.style.setProperty("--body-bg", bodyBg);
e.preventDefault();
});
}
// add tab hover code
const topTabs = d.querySelectorAll(".topic > li");
for (let j = 0; j < topTabs.length; j++) {
topTabs[j].addEventListener("click", function(e) {
removeActiveTab();
topTabs[j].classList.add("active");
});
}
function removeActiveTab() {
for (let k = 0; k < topTabs.length; k++) {
topTabs[k].classList.remove("active");
}
}
/*
document.documentElement.style
.setProperty('--my-variable-name', 'pink');
*/
})(document);
</script>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.