<div class="bodybg"></div>
<div class="wrap">
<h1>MOSKOVITA PHOTOGRAPHY</h1>
<div class="mast">
<img id="mastImage" src="0818170631b_HDRb_NR-975px.jpg" alt="Takhlakh Lake - Mt Adams, Sunrise at Takhlakh Lake under Mt Adams" width="975" height="549">
</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>
</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="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>
</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="2Jacks_Lake_NR.jpg" data-alt="Two Jack Lake in Banff"><img src="2Jacks_Lake_NR.jpg" alt="Two Jack Lake in Banff"></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="StellarJay1-800.jpg" data-alt="Stellar Jay on branch"><img src="StellarJay1-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="Chickadee on branch"><img src="Jan27chickadee-800.jpg" alt="Chickadee on branch"></a></li>
<li><a href="April2016-2.jpg" data-alt="Red Wing Blackbird singing on branch"><img src="April2016-2.jpg" alt="Red Wing 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="Oct12jay-800.jpg" data-alt="Scrub Jay landing"><img src="Oct12jay-800.jpg" alt="Scrub Jay landing"></a></li>
<li><a href="BlueJayChristmasTree0-800.jpg" data-alt="Scrub Jay"><img src="BlueJayChristmasTree0-800.jpg" alt="Scrub Jay"></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>
</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>
</ul>
</li>
</div>
</main>
<footer class="footer">
<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/Jack_and_Alan_Blog.htm" class="button">Blogs</a>
<a href="https://moskovita-photography.com/about.htm" class="button">About</a>
<a href="http://www.moskovita-photography.com/Stock_Photos.htm" class="button">Stock Photos</a>
</nav>
<p class="sig">© Jack Moskovita Photography</p>
</footer>
</wrap>/* just testing here */
html {
--body-bg: url(0818170631b_HDRb_NR-975px.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;
background-image: var(--body-bg);
filter: blur(7px);
transition: .5s ease;
}
body {
background: #000;
color: #fff;
}
@media (min-width:1250px) and (any-hover: hover) {
.bodybg:hover + .wrap{opacity:0;}
.bodybg:hover:after {
filter: blur(0px)
}
.bodybg:before {
content: "Move your mouse to the side to reveal the full image";
position: fixed;
left: 0;
top: 0;
width: 170px;
padding: 10px;
background: rgba(255,255,255,0.5);
color: #000;
font-weight: bold;
font-size: 1rem;
line-height: 1.2;
border: 1px solid #fff;
text-shadow: 1px 1px #fff;
z-index: 1;
}
.bodybg:hover:before {
content: "Move your mouse to the centre to bring back the gallery";
}
}
.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;
}(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("mouseover", function (e) {
removeActiveTab();
topTabs[j].classList.add("active");
});
}
function removeActiveTab() {
for (let k = 0; k < topTabs.length; k++) {
topTabs[k].classList.remove("active");
}
}
})(document);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.