<table role="presentation" align="center" bgcolor="#ececec" border="0" cellpadding="0" cellspacing="0" width="100%" class="container">
<tr>
<td align="center">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table role="presentation" bgcolor="#ffffff" width="100%" style="max-width:600px;border: solid 1px #d0d0d0" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 11px;color:#575756; padding: 10px 0" align="center">
<a href="#" target="_blank" style="color:#575756; text-decoration:underline">View in browser</a>
</td>
</tr>
<tr>
<td valign="top" align="center">
<!-- FALLBACK HERO - STATIC IMAGE -->
<div class="fallback">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td valign="top" align="center" style="font-size: 20px;font-family:Arial, Helvetica, sans-serif;">
<a href="#" target="_blank" style="color:#1a2b68">
<img src="https://source.unsplash.com/random/600x400" alt="Alt" style="display:block; border:none;" width="600" height="400" class="img">
</a>
</td>
</tr>
</table>
</div>
<!-- CAROUSEL -->
<!--[if !mso]><!-- -->
<div class="carousel-container" style="display:none">
<input type="radio" name="slide" id="slide1">
<input type="radio" name="slide" id="slide2">
<input type="radio" name="slide" id="slide3">
<input type="radio" name="slide" id="slide4">
<input type="radio" name="slide" id="slide5" checked>
<input type="radio" name="slide" id="slide6">
<input type="radio" name="slide" id="slide7">
<input type="radio" name="slide" id="slide8">
<input type="radio" name="slide" id="slide9">
<div class="carousel-viewport">
<div class="slide slide-tl">
<label for="slide2" class="right">
⇉
</label>
<label for="slide4" class="down">
⇉
</label>
</div>
<div class="slide slide-tc">
<label for="slide1" class="left">
⇉
</label>
<label for="slide5" class="down">
⇉
</label>
<label for="slide3" class="right">
⇉
</label>
</div>
<div class="slide slide-tr">
<label for="slide2" class="left">
⇉
</label>
<label for="slide6" class="down">
⇉
</label>
</div>
<div class="slide slide-ml">
<label for="slide1" class="up">
⇉
</label>
<label for="slide5" class="right">
⇉
</label>
<label for="slide7" class="down">
⇉
</label>
</div>
<div class="slide slide-mid">
<label for="slide4" class="left">
⇉
</label>
<label for="slide2" class="up">
⇉
</label>
<label for="slide6" class="right">
⇉
</label>
<label for="slide8" class="down">
⇉
</label>
</div>
<div class="slide slide-mr">
<label for="slide3" class="up">
⇉
</label>
<label for="slide5" class="left">
⇉
</label>
<label for="slide9" class="down">
⇉
</label>
</div>
<div class="slide slide-bl">
<label for="slide4" class="up">
⇉
</label>
<label for="slide8" class="right">
⇉
</label>
</div>
<div class="slide slide-bc">
<label for="slide7" class="left">
⇉
</label>
<label for="slide5" class="up">
⇉
</label>
<label for="slide9" class="right">
⇉
</label>
</div>
<div class="slide slide-br">
<label for="slide8" class="left">
⇉
</label>
<label for="slide6" class="up">
⇉
</label>
</div>
</div>
</div>
<!--<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding-top:20px">
<h1 style="font-size: 23px;font-family:Arial, Helvetica, sans-serif;color: #1a2b68;line-height: 25px;font-weight: bold; text-transform: uppercase; margin: 0;" tabindex="0">Multidirectional carousel</h1>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" class="center" style="padding:30px 20px;">
<p style="color:#77787b; font-family:Arial, Helvetica, sans-serif; font-size:13px;line-height:19px; margin: 0" tabindex="0">
Use the arrows to scroll around the big image.
<br><br>
Carousel type build that scrolls over large background image using directional arrows. Background is moved by changing the 'background-position' on relative input checked state. Checked state also controls which arrows will be visible on screen. Unsupported environments will display a fallback static image.
<br><br>
Background images provided by <a href="https://source.unsplash.com/" target="_blank">Unsplash Source</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
body {
width: 100% !important;
height: 100% !important;
padding: 0;
text-size-adjust: none;
/* stop WebKit and Windows mobile changing text size */
text-size-adjust: 100%;
/* stop WebKit and Windows mobile changing text size */
margin: 0 auto !important;
/* fix email not centered on Android 4.4 + Samsung Mail */
background: #ececec;
}
table {
border-collapse: collapse !important;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove spacing between tables in Outlook 2007 and up */
img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
interpolation-mode: bicubic;
/* smoother resized images in Internet Explorer */
}
@media screen and (max-width: 580px) {
/* centre on gmail iphone */
.container {
width: 100vw !important;
}
.rwd-line {
display: block;
}
.center {
margin: 0 auto !important;
text-align: center !important;
}
.img {
width: 100% !important;
height: auto !important;
}
.width100 {
width: 100% !important;
}
.mobilehide {
display: none !important;
}
}
/* CAROUSEL STYLES */
.carousel-container,
input {
display: none;
}
@media screen and (min-device-pixel-ratio: 0), screen and (min--moz-device-pixel-ratio: 0) {
@supports (color: #ffffff) {
.fallback {
display: none !important;
}
.carousel-container,
.carousel-viewport {
display: block !important;
width: 600px;
height: 400px;
}
.carousel-viewport {
background-image: url("https://source.unsplash.com/random/1800x1200");
background-size: 1800px 1200px;
background-position: center center;
transition: background-position 0.3s linear;
transition: background-position 0.3s linear;
}
/* Nav markers */
.slide {
display: none;
width: 600px;
height: 400px;
position: relative;
animation: fadeIn linear 0.7s;
animation: fadeIn linear 0.7s;
}
.slide label {
position: absolute;
width: 28px;
height: 52px;
font-size: 50px;
color: #fff;
}
.slide label img {
width: 100%;
animation: pulse 1.5s ease-in-out infinite;
animation: pulse 1.5s ease-in-out infinite;
}
label.up {
top: 10px;
left: 50%;
transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
}
label.left {
top: 50%;
left: 10px;
transform: translateY(-50%) rotate(-180deg);
transform: translateY(-50%) rotate(-180deg);
}
label.right {
top: 50%;
right: 10px;
transform: translateY(-50%);
transform: translateY(-50%);
}
label.down {
bottom: 10px;
left: 50%;
transform: translateX(-50%) rotate(90deg);
transform: translateX(-50%) rotate(90deg);
}
/* CHECK CONTROLS */
#slide1:checked ~ div .slide-tl {
display: block !important;
}
#slide1:checked ~ .carousel-viewport {
background-position: left top;
}
#slide2:checked ~ div .slide-tc {
display: block !important;
}
#slide2:checked ~ .carousel-viewport {
background-position: center top;
}
#slide3:checked ~ div .slide-tr {
display: block !important;
}
#slide3:checked ~ .carousel-viewport {
background-position: right top;
}
#slide4:checked ~ div .slide-ml {
display: block !important;
}
#slide4:checked ~ .carousel-viewport {
background-position: left center;
}
#slide5:checked ~ div .slide-mid {
display: block !important;
}
#slide5:checked ~ .carousel-viewport {
background-position: center center;
}
#slide6:checked ~ div .slide-mr {
display: block !important;
}
#slide6:checked ~ .carousel-viewport {
background-position: right center;
}
#slide7:checked ~ div .slide-bl {
display: block !important;
}
#slide7:checked ~ .carousel-viewport {
background-position: left bottom;
}
#slide8:checked ~ div .slide-bc {
display: block !important;
}
#slide8:checked ~ .carousel-viewport {
background-position: center bottom;
}
#slide9:checked ~ div .slide-br {
display: block !important;
}
#slide9:checked ~ .carousel-viewport {
background-position: right bottom;
}
@media screen and (max-width: 580px) {
.carousel-container,
.carousel-viewport,
.slide {
width: 100vw !important;
height: 66vw !important;
}
.carousel-viewport {
background-size: 300vw 198vw !important;
}
}
/* fallbacks */
div[class~="aolmail_fallback"],
#MessageViewBody .fallback {
display: block !important;
}
div[class~="aolmail_carousel-container"],
#MessageViewBody .carousel-container {
display: none !important;
}
@keyframes pulse {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1, 1);
}
}
@-webkit-keyframes pulse {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1, 1);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
}
// No JS HERE!
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.