BrianaJHunter
3/11/2020 - 10:27 PM
Hover Slideshow
<!--HTML-->
<div class="container">
<div class="row">
<div class="col-sm-6 series-1">
<div class="SplitCardl">
<div class="Awning"></div>
</div>
<div class="SplitCardr">
<h3>Awning Window</h3>
<ul>
<li>Hinged on the top and opens outward from the bottom, allowing for ventilation and protection from the rain</li>
<li>Rigid vinyl exterior helps protect against water damage</li>
<li>Rich natural pine or prefinished White, Dark Bronze or Black interiors</li>
</ul>
</div>
</div>
<div class="col-sm-6 series-2">
<div class="SplitCardl">
<div class="Bay"></div>
</div>
<div class="SplitCardr">
<h3>Bay & Bow Windows</h3>
<ul>
<li>Available with casement windows in the following styles: 30° bay, 45° bay and 90° box bay; 10° bow</li>
<li>Available with double-hung windows in the following styles: 30° bay, 45° bay</li>
<li>Wood protected by vinyl or Fibrex® composite exterior</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 series-3">
<div class="SplitCardl">
<div class="Casement"></div>
</div>
<div class="SplitCardr">
<h3>Casement Window</h3>
<ul>
<li>Hinged on the side and cranks open outward to the left or right allowing for full top to bottom ventilation</li>
<li>Low-maintenance vinyl exterior provides long-lasting protection against water damage</li>
<li>Unfinished natural pine or prefinished White, Dark Bronze or Black interiors</li>
</ul>
</div>
</div>
<div class="col-sm-6 series-4">
<div class="SplitCardl">
<div class="Dblhung"></div>
</div>
<div class="SplitCardr">
<h3>Double-Hung Window</h3>
<ul>
<li>Our best-selling double-hung, with two operating sash that move up and down allowing for ventilation on the top, bottom or both</li>
<li>Unfinished pine or prefinished White, Dark Bronze or Black interior protected by vinyl exterior</li>
<li>Extremely energy-efficient, durable and time-tested</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 series-5">
<div class="SplitCardl">
<div class="Woodwright"></div>
</div>
<div class="SplitCardr">
<h3>WoodWright Double Hung</h3>
<ul>
<li>Has two operating sash that move up and down allowing for ventilation on the top, bottom or both</li>
<li>Natural wood sash interiors in pine, maple, oak or prefinished White, protected by Fibrex® composite exterior</li>
<li>Helps replicate the look of traditional architecture, making it a great option for replacement projects</li>
</ul>
</div>
</div>
<div class="col-sm-6 series-6">
<div class="SplitCardl">
<div class="Gliding"></div>
</div>
<div class="SplitCardr">
<h3>Gliding Window</h3>
<ul>
<li>Low-maintenance fiberglass exterior</li>
<li>Unfinished pine or prefinished White, Dark Bronze or Black interior</li>
<li>Innovative horizontal glide system provides years of reliable operation</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 series-7">
<div class="SplitCardl">
<div class="Picture"></div>
</div>
<div class="SplitCardr">
<h3>Picture Window</h3>
<ul>
<li>These windows are stationary and do not open, making them more energy efficient and allowing larger sizes and greater views</li>
<li>Wood protected by vinyl exterior</li>
<li>Durable and time-tested</li>
</ul>
</div>
</div>
<div class="col-sm-6 series-8">
<div class="SplitCardl">
<div class="Special"></div>
</div>
<div class="SplitCardr">
<h3>Specialty Shape Windows</h3>
<ul>
<li>Our best-selling specialty windows</li>
<li>Stylish, refined and proven</li>
<li>Durable and time-tested</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 series-9">
<div class="SplitCardl">
<div class="frenchglide"></div>
</div>
<div class="SplitCardr">
<h3>Gliding Patio Door</h3>
<ul>
<li>Our best-selling gliding patio door</li>
<li>Unfinished pine, maple or oak interior protected by vinyl exterior. Prefinished White interior also available.</li>
<li>Blinds-between-the-glass option</li>
</ul>
</div>
</div>
<div class="col-sm-6 series-10">
<div class="SplitCardl">
<div class="Dblhung"></div>
</div>
<div class="SplitCardr">
<h3>Hinged Patio Door</h3>
<ul>
<li>Opens into the room to provide maximum patio space</li>
<li>Traditional styling with pine, oak, maple or prefinished White interior protected by vinyl exterior</li>
<li>Available in one-, two- and three-panel configurations</li>
<li>Blinds-between-the-glass option</li>
</ul>
</div>
</div>
</div>
</div>
/* CSS */
.Awning {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/awning1.png");}
.Bay {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/bay1.png");}
.Casement {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/casement1.png");}
.Dblhung {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/double1.png");}
.Woodwright {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/woodwright1.png");}
.Gliding {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/gliding1.png");}
.Picture {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/picture1.png");}
.Special {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/specialty1.png");}
.frenchglide {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/specialty1.png");}
.hinged {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/specialty1.png");}
.SplitCardl {
width:50%;
dipslay:block;
float:left;
padding:1em;
}
.SplitCardr {
width:50%;
dipslay:block;
float:right;
}
@keyframes BGAwning {
0% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/awning2.png");}
30% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/awning3.png");}
60% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/awning4.jpg");}
100% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/awning5.jpg");}
}
@keyframes BGbaybow {
0% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/bay1.png");}
30% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/bay2.png");}
60% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/bay3.png");}
100% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/bay4.png");}
}
@keyframes BGcasement {
0% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/casement2.png");}
30% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/casement3.png");}
60% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/casement4.jpg");}
100% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/casement5.jpg");}
}
@keyframes BGDBlhung {
0% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/double2.png");}
30% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/double3.png");}
60% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/double4.jpg");}
100% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/double5.jpg");}
}
@keyframes BGWoodwright {
0% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/woodwright2.png");}
30% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/woodwright3.png");}
60% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/woodwright4.jpg");}
100% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/woodwright5.jpg");}
}
@keyframes BGGliding {
0% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/gliding2.png");}
30% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/gliding3.png");}
60% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/gliding4.jpg");}
100% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/gliding5.jpg");}
}
@keyframes BGPicture {
0% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/picture2.png");}
30% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/picture3.png");}
60% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/picture4.jpg");}
100% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/picture5.jpg");}
}
@keyframes BGSpecial {
0% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/specialty2.png");}
30% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/specialty3.png");}
60% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/picture4.jpg");}
100% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/picture5.jpg");}
}
@keyframes BGGlide {
0% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/specialty2.png");}
30% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/specialty3.png");}
60% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/picture4.jpg");}
100% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/picture5.jpg");}
}
@keyframes BGHinged {
0% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/specialty2.png");}
30% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/specialty3.png");}
60% { background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/picture4.jpg");}
100% {background: url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Anderson/400Series/picture5.jpg");}
}
.Awning:hover,
.Awning:active,
.Awning:focus,
.Awning.hover {
animation: BGAwning 4s infinite;
}
.Bay:hover,
.Bay:active,
.Bay:focus,
.Bay.hover {
animation: BGbaybow 4s infinite;
}
.Casement:hover,
.Casement:active,
.Casement:focus,
.Casement.hover {
animation: BGcasement 4s infinite;
}
.Dblhung:hover,
.Dblhung:active,
.Dblhung:focus,
.Dblhung.hover {
animation: BGDBlhung 4s infinite;
}
.Woodwright:hover,
.Woodwright:active,
.Woodwright:focus,
.Woodwright.hover {
animation: BGWoodwright 4s infinite;
}
.Gliding:hover,
.Gliding:active,
.Gliding:focus,
.Gliding.hover {
animation: BGGliding 4s infinite;
}
.Picture:hover,
.Picture:active,
.Picture:focus,
.Picture.hover {
animation: BGPicture 4s infinite;
}
.Special:hover,
.Special:active,
.Special:focus,
.Special.hover {
animation: BGSpecial 4s infinite;
}
.frenchglide:hover,
.frenchglide:active,
.frenchglide:focus,
.frenchglide.hover {
animation: BGGlide 4s infinite;
}
.Dblhung:hover,
.Dblhung:active,
.Dblhung:focus,
.Dblhung.hover {
animation: BGHinged 4s infinite;
}
.col-sm-6 {
height:50vh;
}
.Awning, .Bay, .Casement, .Dblhung, .Woodwright, .Gliding, .Picture, .Special, .frenchglide, .hinged {
background-size: contain;
background-repeat: no-repeat;
width: 85%;
height: 300px;
}
BGAwning, BGbaybow, BGcasement, BGDBlhung, BGWoodwright, BGGliding, BGPicture, BGSpecial, BGGlide, BGHinged {
background-size: contain;
background-repeat: no-repeat;
width: 85%;
height: 300px;
}