Cycle2 transparent overlay

Developer
Peter Appleyard
Size
3,045 Kb
Views
22,264
  1. Cycle2 transparent overlay Previews
  2. Cycle2 transparent overlay HTML Codes
  3. Cycle2 transparent overlay CSS Codes

How do I make an cycle2 transparent overlay?

This pen is to work through an ie8 bug.Update, img{max-width: 100%;} bugged it out. What is a cycle2 transparent overlay? How do you make a cycle2 transparent overlay? This script and codes were developed by Peter Appleyard on 06 October 2022, Thursday.

Cycle2 transparent overlay Previews
IQ Test

Cycle2 transparent overlay - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cycle2 transparent overlay</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="promo-block cycle-slideshow" data-cycle-pager=".slideshow-pager" data-cycle-speed="2000" data-cycle-timeout="5500" data-pause-on-hover="true" data-cycle-slides="> a"> <a href="" class="rotator"> <div class="rotatorContainer"> <img src="http://www.dooleys.com/images/ROTATOR-IMAGES_1.jpg" alt="Dooleys Catholic Club"> <span class="panel"> <h2>Win A Jeep Cerokee</h2> <hr> <h3>MAJOR DRAW</h3> <h4>Line Four</h4> <hr> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p class="legals">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <button>Link</button> </span> </div> </a> <a href="" class="rotator"> <div class="rotatorContainer"> <img src="http://www.dooleys.com/images/SLIDERS/home/ROTATOR-IMAGES_4.jpg" alt="8 Dragons at Dooleys"> <span class="panel"> <h2>New Headline</h2> <hr> <h3>MAJOR DRAW</h3> <h4>Line Four</h4> <hr> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi.</p> <p class="legals">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <button>Link</button> </span> </div> </a> <a href="" class="rotator"> <div class="rotatorContainer"> <img src="http://www.dooleys.com/images/ROTATOR-IMAGES_5.jpg" alt="Dooleys Health Club"> <span class="panel"> <h2>Newer Headline</h2> <hr> <h3>MAJOR DRAW</h3> <h4>Line Four</h4> <hr> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p class="legals">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <button>Link</button> </span> </div> </a> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js'></script>
</body>
</html>

Cycle2 transparent overlay - Script Codes CSS Codes

body, html { width: 100%; height: 100%; margin: 0; background-color: #000;
}
/*img{ max-width: 100%;
}
*/
.rotatorContainer { position: relative !important;
}
.rotatorContainer img { position: relative; width: 100%;
}
.rotatorContainer .panel { position: absolute; width: 30%; z-index: 2000; height: 100%; background-color: #000; background-color: rgba(0, 0, 0, 0.6); top: 0; right: 0; color: #FFF; padding: 20px; box-sizing: border-box; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
.rotatorContainer .panel h2 { font-family: "HelveticaNeueETW01-75Bd"; font-size: 1.8em;
}
.rotatorContainer .panel h3 { font-family: "HelveticaNeueETW01-75Bd"; font-size: 1.5em; margin-bottom: 0; padding-bottom: 4px;
}
.rotatorContainer .panel h4 { font-family: "HelveticaNeueETW01-45Lt"; font-size: 1.3em; margin-top: 0; padding-top: 0;
}
.rotatorContainer .panel .legals { font-size: 9px; line-height: 11px;
}
.rotatorContainer .panel button { display: inline-block; padding: 5px 18px; background-color: #7b2f3d; border-radius: 4px; color: #FFF; text-decoration: none; text-transform: uppercase; margin-top: 10px; border: 0 solid #000;
}
.rotatorContainer .panel button:hover { background-color: #a03d4f; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
Cycle2 transparent overlay - Script Codes
Cycle2 transparent overlay - Script Codes
Home Page Home
Developer Peter Appleyard
Username whodaman
Uploaded October 06, 2022
Rating 3
Size 3,045 Kb
Views 22,264
Do you need developer help for Cycle2 transparent overlay?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Peter Appleyard (whodaman) Script Codes
Name
LiScroll 1.0 fluid
Simple SCSS Dropdown Nav
Jquery.slimmenu.js testing
Show and hide, based on webapp id business catalyst
Tabbed Navigation
Fox Grid
Datepicker input for businesscatalyst, with age limitation
Function for responsively loading carousel items with Cycle2
Fox layout, floated grid
Slidebars js
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!