How do I make the slider go 100% of the page

How do I make the slider go 100% of the page - javascript

I've been playing with this code all morning trying to make this slider go 100% of the browser. I am using swiper slider if that helps? I have attached my code below for reference.
If you preview the code in full width view the slider seems to be trapped in the original image size and not going to the edge of the window like the rest of the stories. Any suggestions would be appericated.
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
initialSlide: 0,
slidesPerView: 1,
spaceBetween: 20,
centeredSlides: true,
autoplay: 2000,
autoplayDisableOnInteraction: false
});
/* Making Thing Pretty
---------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.opencanvascontainer {
margin: 0 auto;
max-width: 1140px;
}
[class*=bit-] {
float: left;/*padding:.3em;*/
position:relative;
}
/* OBSW Grid System
---------------------------- */
.box {
text-align: center;
border: solid 1px black;
color: #000;
font-size: 12px;
font-family: 'proxima_nova_rgregular', sans-serif;
padding: 15px 10px 15px 10px;
}
.bit-1 {
width: 100%;
}
.bit-2 {
width: 50%;
padding: 20px;
}
.bit-3 {
width: 33.33333%;
padding: 20px;
}
.bit-4 {
width: 25%;
}
.bit-4-tabs {
width: 25%;
padding:10px;
}
.bit-5 {
width: 20%;
}
.bit-5-tabs {
width: 20%;
padding:10px;
}
.bit-6 {
width: 16.66667%;
padding: .3em;
}
.bit-7 {
width: 14.28571%;
}
.bit-8 {
width: 12.5%;
}
.bit-9 {
width: 11.11111%;
}
.bit-10 {
width: 10%;
}
.bit-11 {
width: 9.09091%;
}
.bit-12 {
width: 8.33333%;
}
.bit-25 {
width: 25%;
}
.bit-40 {
width: 40%;
}
.bit-60 {
width: 60%;
}
.bit-75 {
width: 75%;
}
.bit-35 {
width: 35%;
padding: 20px;
}
.bit-65 {
width: 65%;
padding: 20px;
}
/* Laptop */
#media (min-width:50em) and (max-width:68.75em) {
.bit-7 {
width: 100%;
}
.bit-10, .bit-12, .bit-4, .bit-8 {
width: 50%;
}
}
/* Tablet */
#media (min-width:30em) and (max-width:50em) {
.bit-10, .bit-12, .bit-4, .bit-6, .bit-8 {
width: 50%;
}
.bit-1, .bit-11, .bit-3, .bit-5, .bit-7, .bit-9 {
width: 100%;
}
}
/* Mobile */
#media (max-width:30em) {
.bit-1, .bit-10, .bit-11, .bit-12, .bit-2, .bit-3, .bit-4, .bit-5, .bit-6, .bit-7, .bit-8, .bit-9, .bit-35, .bit-65 {
width: 100%;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
.bit-5-tabs, .bit-4-tabs {width:50%;padding:5px;}
.storytext {margin-left:15px;}
.storytextcenter {margin-left:0px;}
.bottomlinespacing {margin-bottom:20px;}
.subtitle {
font-size:20px !important;
margin-top: 1em !important;
}
.fancy span { margin-top:1.5em !important;}
}
/* -------------------------
End OBSW Grid System */
/* Full Width Wrapper
---------------------------- */
.fullwidthwrapper {
width: 100%;
padding-top: 150px;
}
#media (max-width:991px) {
.fullwidthwrapper {
padding-top: 5px;
}
}
#media (max-width:907px) {
.fullwidthwrapper {
padding-top: 5px;
line-height: 42px;
}
}
/* -------------------------
End Full Width Wrapper */
/* Header Slider
---------------------------- */
.hpfullwidth-top {
background-color: #fff;
background-repeat: repeat;
padding-top: 150px;
}
#media (max-width:991px) {
.hpfullwidth-top {
padding-top: 5px;
}
}
.imageholder {
max-width: 1500px;
margin: 0 auto;
}
/* -------------------------
End Header Slider */
/* Image Hover
---------------------------- */
.fade {
opacity: 1;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
fade:hover {
opacity: 0.5;
}
/* -------------------------
End Image Hover */
.storytext {
margin-top:15px;
line-height:20px;
}
.storytextcenter {
margin-top:15px;
line-height:20px;
}
.firstline {
font-family:proxima_nova_rgbold, serif;
font-size:20px;
color:#000;
}
.secondline {
font-family:'proxima_nova_rgregular', serif;
font-size:14px;
color:#000;
}
.thirdline {
font-family:proxima_nova_rgbold, serif;
font-size:14px;
color:#000;
border-bottom: solid 2px #000000;
display: inline;
padding-bottom: 2px;
}
.bottomlinespacing {
margin-bottom:0px;
}
.subtitle {
margin: 1.5em 0 .3em 0;
font-size:35px;
letter-spacing:5px;
}
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 0;
width: 600px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
.tabbedcontainer {
width: 100%;
margin: 0 auto;
}
ul.tabs {
margin-top: 1em;
padding: 0px;
list-style: none;
text-align:center;
}
ul.tabs li {
background: none;
color: #000;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current {
background: #fff;
color: #000;
text-decoration:underline;
font-family:proxima_nova_rgbold, serif;
font-weight:bold;
}
.tab-content {
display: none;
background: #fff;
}
.tab-content.current {
display: inherit;
}
.swiper-container {
width: 100%;
height: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate(0px, 0px);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
position: relative;
}
/* Auto Height */
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-transition-property: -webkit-transform, height;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform, height;
}
/* Pagination Styles */
.swiper-pagination {
position: relative;
text-align: center;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 0;
margin-top: 5px;
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullet {
width: 10px;
height: 10px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
margin: 5px;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: black;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: black;
opacity: 1;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
}
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-moz-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
-webkit-background-size: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
#-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>
<!-- Start Body Content -->
<div class="fullwidthwrapper">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- SLIDE 1 -->
<div class="swiper-slide" data-swiper-autoplay="2000">
<picture>
<source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" />
<source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" />
<!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div>
<!-- END -->
<!-- SLIDE 2 -->
<div class="swiper-slide" data-swiper-autoplay="2000">
<picture>
<source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" />
<source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" />
<!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div>
<!-- END -->
<!-- SLIDE 2 -->
<div class="swiper-slide" data-swiper-autoplay="2000">
<picture>
<source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" />
<source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" />
<!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div>
<!-- END -->
</div>
<div class="heightissue" style="height:18px; width:100%;"> </div>
</div>
<div class="swiper-pagination"> </div>
<div class="bit-1">
<div class="bit-3">
<img src="https://s17.postimg.org/lfnazyidb/nike1.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP RUNNING</span><br>
<span class="secondline">Starting at $59.99</span>
<div class="bottomlinespacing"><span class="thirdline">SHOP NOW</span></div>
</div>
</div>
<div class="bit-3">
<img src="https://s17.postimg.org/b4ay7aqnz/nike2.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP TRAINING</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-3">
<img src="https://s17.postimg.org/qoibxu0sf/nike3.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
<div class="bit-1" style="background-color:#ebebeb; padding-top:20px; padding-bottom:20px;">
<div class="imageholder">
<div class="bit-2">
<img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
<div class="storytext">
<span class="firstline">WOMEN'S ATHLETIC</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-2">
<img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
<div class="storytext">
<span class="firstline">MEN'S ATHLETIC</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
</div>
<div class="bit-1" style="margin-bottom:40px;">
<p class="subtitle fancy"><span>ATHLETIC<font style="font-family:proxima_nova_rgbold, serif;">REPORT</font>2017</span></p>
<div class="tabbedcontainer">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Women's</li>
<li class="tab-link" data-tab="tab-2">Men's</li>
<li class="tab-link" data-tab="tab-3">Girls'</li>
<li class="tab-link" data-tab="tab-4">Boys'</li>
</ul>
<div id="tab-1" class="tab-content current">
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
<div id="tab-2" class="tab-content">
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
<div id="tab-3" class="tab-content">
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
<div id="tab-4" class="tab-content">
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-4-tabs">
<img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%">
<div class="storytext">
<span class="firstline">SHOP SNEAKERS</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
</div>
</div>
<div class="bit-1" style="background-color:#ebebeb; padding-top:20px; padding-bottom:20px;">
<div class="imageholder">
<div class="bit-2">
<img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
<div class="storytext">
<span class="firstline">WOMEN'S ATHLETIC</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
<div class="bit-2">
<img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%">
<div class="storytext">
<span class="firstline">MEN'S ATHLETIC</span><br>
<span class="secondline">Starting at $59.99</span><br>
<span class="thirdline">SHOP NOW</span>
</div>
</div>
</div>
</div>
</div>
<!-- End Body Content -->
Thanks!

Remove the padding from the class "bit-3".

Related

How to get smooth transition of caraousel slides

I am implementing an carousel on click of previous and next the slide changes , this is my code which is working fine the only issue is transition, it is not as smooth as expected. I have attached the working copy of the code.
Can anyone please help why it is not going smooth, what i am missing
Thanks
let sessions = document.querySelectorAll('#sessionContainer .carousel .carousel-item');
sessions.forEach((el) => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = sessions[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
$(document).ready(function () {
$('#sessionCarousel').carousel({ interval: false });
$('#sessionCarousel').carousel('pause');
});
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1pxsolidrgba(0,0,0,.125);
border-radius: .25rem;
margin: 10px;
}
.block-container-component .force-img-background {
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 86% auto !important;
}
.parent-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.title-anchor {
margin-left: 3rem !important;
}
#media (min-width: 768px) {
.parent-container {
width: 750px;
}
}
#media (min-width: 992px) {
.parent-container {
width: 970px;
}
}
#media (min-width: 1200px) {
.parent-container {
width: 1170px;
}
}
#media (max-width: 767px) {
#sessionContainer .carousel-inner .carousel-item>div {
display: none;
}
#sessionContainer .carousel-inner .carousel-item>div:first-child {
display: block;
}
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
#sessionContainer .carousel-inner .carousel-item-end.active,
#sessionContainer .carousel-inner .carousel-item-next {
transform: translateX(25%);
}
#sessionContainer .carousel-inner .carousel-item-start.active,
#sessionContainer .carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
#sessionContainer .card img {
width: 98%;
}
#sessionContainer .carousel-item {
justify-content: space-between;
}
}
#media (max-width: 767px) {
#sessionContainer .card img {
width: 100%;
}
#sessionContainer .overlay {
width: 100%;
/* height: 75vh; */
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: block;
}
}
.carousel-control-next,
.carousel-control-prev {
width: 22%;
}
#sessionContainer .carousel-inner .carousel-item-end,
#sessionContainer .carousel-inner .carousel-item-start {
transform: translateX(0);
}
#sessionContainer .card {
border: 0;
}
#sessionContainer .card {
position: relative;
border-radius: 1.5rem !important;
}
#sessionContainer .card .card-img-overlays {
position: absolute;
bottom: 15%;
left: 10%;
color: #fff;
font-weight: bolder;
}
#sessionContainer a {
text-decoration: none;
}
#sessionContainer .indicator {
border: 1px solid rgb(202, 202, 202);
padding: 3px 6px 3px 6px;
}
#sessionContainer .indicator:hover {
background-color: blue;
border: 1px solid blue;
transition: 200ms;
}
#sessionContainer .indicator:hover {
color: white;
transition: 200ms;
}
#sessionContainer .indicator {
color: lightgray;
}
#sessionContainer .float-end {
padding-top: 10px;
}
#sessionContainer .card-body {
background: #041E42;
color: white;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
padding: 1.5rem 2rem !important;
}
#sessionContainer .card-img-top {
position: relative;
}
.card .main-img {
position: relative !important;
}
.card:hover .bot-text {
display: block !important;
}
.card:hover .sub-text {
display: block !important;
}
.carousel-caption {
color: #1f1818 !important;
text-align: left;
position: absolute;
right: 15%;
left: 18%;
top: 36%;
}
.top-right {
position: absolute;
right: 5%;
top: 7%;
}
.btn-know {
background: white !important;
color: black;
border-radius: 20px !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
padding: .6rem 2rem !important;
margin-top: 3rem !important;
}
.line {
height: 6px;
width: 100%;
background: #2ade32;
position: absolute;
bottom: 0;
left: 2%;
}
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<div class="block-container parbase section">
<div class="block-container-component full-width classic theme-blue">
<div class="mt-5 force-img-background"
style="background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%)
data-overlay="0">
<div class="block-container margin-bottom-0">
<div class="block-container-list top-bot-no-inside-padding left-right-">
<div class="title section">
<div class="custom-targeting-buttons "></div>
<h3 class="title-anchor left bogle-bold margin-bottom-20" data-component="title">Session
takeaway
infographics</h3>
</div>
<div class="html-component-2.0 section">
<!-- Raw HTML -->
<div class="rte-styles margin-bottom-50">
<div class="container-fluid" id="sessionContainer" style="margin:50px auto;position: relative;">
<div class="row mx-auto my-auto justify-content-center">
<div class="col-1">
<a style="color: black" class="carousel-control-prev bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="prev">PREVIOUS
<img
src=""
alt="">
</a>
</div>
<div class="col-10">
<div id="sessionCarousel" class="carousel slide transform">
<div class="carousel-inner mx-auto row w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe1</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe2</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe3</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe4</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe5</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe6</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1">
<a style="color: black" class="carousel-control-next bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="next">NEXT
<img
src=""
alt="">
</a>
</div>
</div>
</div>
</div>
<!-- HTML Form -->
</div>
<div class="button-2-0 section">
<div class="custom-targeting-buttons "></div>
<div class="button-component-wrapper button-glms-alignment left margin-bottom-10">
<a class="button-glms-button button-primary button-ozark-noir btn-regular button-icon-alignment-left button-content"
href="" role="button">
<span>
<i class=" button-icon-alignment-left button-icon-content2 btn"></i>
Click here for more
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Just add carousel-fade and edit the bootstrap5 css3 directly to get the required effect
for example in your code i added
checkout my video explaining this on my custom bootstrap5 blog theme
https://youtu.be/SZkv2ipRico
.carousel-item {
transition-duration: 1.5s;
}
.transform {
transition: 5s ease-out 5s ease-in 1s ease-in-out;
opacity: 90%;
}
.carouse-fade{
transition-duration: 1.5s;
opacity: 50%;
}
and added carousel-fade like i showed you before in the
<div id="sessionCarousel" class="carousel slide transform carousel-fade" data-bs-ride="carousel">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<style>
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1pxsolidrgba(0,0,0,.125);
border-radius: .25rem;
margin: 10px;
}
.block-container-component .force-img-background {
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 86% auto !important;
}
.parent-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.title-anchor {
margin-left: 3rem !important;
}
#media (min-width: 768px) {
.parent-container {
width: 750px;
}
}
#media (min-width: 992px) {
.parent-container {
width: 970px;
}
}
#media (min-width: 1200px) {
.parent-container {
width: 1170px;
}
}
#media (max-width: 767px) {
#sessionContainer .carousel-inner .carousel-item>div {
display: none;
}
#sessionContainer .carousel-inner .carousel-item>div:first-child {
display: block;
}
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
#sessionContainer .carousel-inner .carousel-item-end.active,
#sessionContainer .carousel-inner .carousel-item-next {
transform: translateX(25%);
}
#sessionContainer .carousel-inner .carousel-item-start.active,
#sessionContainer .carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
#sessionContainer .card img {
width: 98%;
}
#sessionContainer .carousel-item {
justify-content: space-between;
}
}
#media (max-width: 767px) {
#sessionContainer .card img {
width: 100%;
}
#sessionContainer .overlay {
width: 100%;
/* height: 75vh; */
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: block;
}
}
.carousel-control-next,
.carousel-control-prev {
width: 22%;
}
#sessionContainer .carousel-inner .carousel-item-end,
#sessionContainer .carousel-inner .carousel-item-start {
transform: translateX(0);
}
#sessionContainer .card {
border: 0;
}
#sessionContainer .card {
position: relative;
border-radius: 1.5rem !important;
}
#sessionContainer .card .card-img-overlays {
position: absolute;
bottom: 15%;
left: 10%;
color: #fff;
font-weight: bolder;
}
#sessionContainer a {
text-decoration: none;
}
#sessionContainer .indicator {
border: 1px solid rgb(202, 202, 202);
padding: 3px 6px 3px 6px;
}
#sessionContainer .indicator:hover {
background-color: blue;
border: 1px solid blue;
transition: 200ms;
}
#sessionContainer .indicator:hover {
color: white;
transition: 200ms;
}
#sessionContainer .indicator {
color: lightgray;
}
#sessionContainer .float-end {
padding-top: 10px;
}
#sessionContainer .card-body {
background: #041E42;
color: white;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
padding: 1.5rem 2rem !important;
}
#sessionContainer .card-img-top {
position: relative;
}
.card .main-img {
position: relative !important;
}
.card:hover .bot-text {
display: block !important;
}
.card:hover .sub-text {
display: block !important;
}
.carousel-caption {
color: #1f1818 !important;
text-align: left;
position: absolute;
right: 15%;
left: 18%;
top: 36%;
}
.top-right {
position: absolute;
right: 5%;
top: 7%;
}
.btn-know {
background: white !important;
color: black;
border-radius: 20px !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
padding: .6rem 2rem !important;
margin-top: 3rem !important;
}
.line {
height: 6px;
width: 100%;
background: #2ade32;
position: absolute;
bottom: 0;
left: 2%;
}
.carousel-item {
transition-duration: 1.5s;
}
.transform {
transition: 5s ease-out 5s ease-in 1s ease-in-out;
opacity: 90%;
}
.carouse-fade{
transition-duration: 1.5s;
opacity: 50%;
}
</style>
<div class="block-container parbase section">
<div class="block-container-component full-width classic theme-blue">
<div class="mt-5 force-img-background"
style="background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%)
data-overlay="0">
<div class="block-container margin-bottom-0">
<div class="block-container-list top-bot-no-inside-padding left-right-">
<div class="title section">
<div class="custom-targeting-buttons "></div>
<h3 class="title-anchor left bogle-bold margin-bottom-20" data-component="title">Session
takeaway
infographics</h3>
</div>
<div class="html-component-2.0 section">
<!-- Raw HTML -->
<div class="rte-styles margin-bottom-50">
<div class="container-fluid" id="sessionContainer" style="margin:50px auto;position: relative;">
<div class="row mx-auto my-auto justify-content-center">
<div class="col-1">
<a style="color: black" class="carousel-control-prev bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="prev">PREVIOUS
<img
src=""
alt="">
</a>
</div>
<div class="col-10">
<div id="sessionCarousel" class="carousel slide transform carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner mx-auto row w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe1</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe2</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe3</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe4</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe5</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe6</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1">
<a style="color: black" class="carousel-control-next bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="next">NEXT
<img
src=""
alt="">
</a>
</div>
</div>
</div>
</div>
<!-- HTML Form -->
</div>
<div class="button-2-0 section">
<div class="custom-targeting-buttons "></div>
<div class="button-component-wrapper button-glms-alignment left margin-bottom-10">
<a class="button-glms-button button-primary button-ozark-noir btn-regular button-icon-alignment-left button-content"
href="" role="button">
<span>
<i class=" button-icon-alignment-left button-icon-content2 btn"></i>
Click here for more
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let sessions = document.querySelectorAll('#sessionContainer .carousel .carousel-item');
sessions.forEach((el) => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = sessions[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
$(document).ready(function () {
$('#sessionCarousel').carousel({ interval: false });
$('#sessionCarousel').carousel('pause');
})
</script>

I want to add a circular ripple hover effect on image

I want to add a ripple effect animation when hovering over an image. I have a link which he uses ripple effect on button by using JavaScript which i have no idea how it work but i want to use the same method over an image on my code.
https://codepen.io/ViktorKorolyuk/pen/GYGwpv
Above Link shows the ripple effect on button and below is my code with blur effect with no animation at all.So I just want to add a ripple effect using the same method but on image
<html>
<div class="row">
<div class="column">
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Architecture</h1></a></div>
</div>
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Architecture</h1></a></div>
</div>
</div>
<!--Second container-->
<div class="column">
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Landscape</h1></a></div>
</div>
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Landscape</h1></a></div>
</div>
</html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text{
position: relative;
}
.div-with-image-and-text .text {
display:none;
}
.div-with-image-and-text:hover img{
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text{
display: block;
position: absolute;
top: 50%;left: 50%;
transform:translate(-50%, -50%);
text-align:center;
font-family: 'Muli';
color:white;
font-size: 30px;
text-shadow:0 0 10px gray;
}

this way give you ripple effect without your effect that you give with hover
first make a html file and write this code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="mainRow">
<div class="display">
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1></a
>
</div> -->
</a>
<a class="HOVER FLASH">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1>
</a>
</div>
</a>
</div>
</div>
</body>
</html>
anf after that make a css file behind your html file and write this code in cssFile
index.css
/* #keyframes shake {
25% {
transform: rotate(calc(var(--angle) * -1));
}
50% {
transform: rotate(var(--angle));
}
100% {
transform: rotate(0deg);
}
} */
html {
font: 100 1.5em sans-serif;
}
body {
padding: 2em 5em 0em 5em;
}
h1 {
font-weight: 100;
}
.display {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 0.1em;
/* width: 50%; */
}
.HOVER {
--width: 100%;
--time: 0.7s;
position: relative;
display: inline-block;
/* height: 18em; */
/* padding: 1em; */
color: white;
background: #222;
overflow: hidden;
}
.HOVER:hover {
filter: blur(8px);
-webkit-filter: blur(8px);
}
.HOVER text {
position: relative;
z-index: 5;
transition: color var(--time);
}
.HOVER:hover text {
color: #222;
}
.HOVER span {
border-radius: 100%;
position: absolute;
display: block;
content: "";
z-index: 0;
width: 0;
height: 0;
background: #fff;
transform: translate(-50%, -50%);
transition: width var(--time), padding-top var(--time);
}
.HOVER:hover span {
width: calc(var(--width) * 2.25);
padding-top: calc(var(--width) * 2.25);
}
.HOVER.FLASH:hover text {
color: white;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
.HOVER.FLASH span {
background: #ff3b3b;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.animated {
--angle: 5deg;
animation: shake 0.3s;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.mainRow {
display: flex;
flex-wrap: wrap;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text {
position: relative;
}
.div-with-image-and-text .text {
display: none;
}
.div-with-image-and-text:hover img {
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="mainRow">
<div class="display">
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1></a
>
</div> -->
</a>
<a class="HOVER FLASH">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1>
</a>
</div>
</a>
</div>
</div>
</body>
</html>
html {
font: 100 1.5em sans-serif;
}
body {
padding: 2em 5em 0em 5em;
}
h1 {
font-weight: 100;
}
.display {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 0.1em;
/* width: 50%; */
}
.HOVER {
--width: 100%;
--time: 0.7s;
position: relative;
display: inline-block;
/* height: 18em; */
/* padding: 1em; */
color: white;
background: #222;
overflow: hidden;
}
.HOVER text {
position: relative;
z-index: 5;
transition: color var(--time);
}
.HOVER:hover text {
color: #222;
}
.HOVER span {
border-radius: 100%;
position: absolute;
display: block;
content: "";
z-index: 0;
width: 0;
height: 0;
background: #fff;
transform: translate(-50%, -50%);
transition: width var(--time), padding-top var(--time);
}
.HOVER:hover span {
width: calc(var(--width) * 2.25);
padding-top: calc(var(--width) * 2.25);
}
.HOVER.FLASH:hover text {
color: white;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
.HOVER.FLASH span {
background: #ff3b3b;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.animated {
--angle: 5deg;
animation: shake 0.3s;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.mainRow {
display: flex;
flex-wrap: wrap;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text {
position: relative;
}
.div-with-image-and-text .text {
display: none;
}
.div-with-image-and-text:hover img {
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}

Simple CSS solution for the Ripple Effect:
A working example: https://next.plnkr.co/edit/i3HhQVIzlbq5QzGM?preview
HTML
<div class="ripple-effect-container">
<img src="https://www.w3schools.com/w3images/wedding.jpg">
</div>
CSS
.ripple-effect-container {
width: 200px;
height: 200px;
background-position: center;
transition: background 0.2s;
background-color: #063458;
}
.ripple-effect-container:hover {
background: #063458 radial-gradient(circle, transparent 1%, #063458 1%) center/15000%;
}
.ripple-effect-container:active {
background-color: #6eb9f7;
background-size: 100%;
transition: background 0s;
}
.ripple-effect-container img:hover {
opacity: 0.5;
}
.ripple-effect-container img {
object-fit: contain;
width: 100%;
height: 100%;
transition: 0.2s;
}

Menu Open Issue and Image Alignment Issue

Here is a Fiddle for the menu https://jsfiddle.net/coyj1drv/1/
<!--I want to have the image above the links and the menu to open and close through the hamburger menu. I have tried multiple times to create that but it is not working. Hope you can help-->
<input type="submit" id="btn" value="Menu" onclick="toggle()" />
<div class="homepage-menu-search-icon" alt=
"search-button" id="aside"><img alt="Search Icon" height="30px" src="test"></div>
<div class="homepage-menu-open-icon">
<a onclick="myFunction(this)">
<div class="homepage-menu-open">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</a>
<menu id="menu">
<nav class="nav-homepage">
<div class="homepage-menu-wrapper">
<div class="overlay" id="av">
<div class="overlay-content">
<div class="menu-search-bar">
<form action="#" id="search-form" method="get" name="search-form">
<input class="search-input" maxlength="80" name="Search" size="21" type="text">
<input class="search-submit" type="submit" value="search">
</form>
</div>
<div class="menu-home">
<img src="test" height="40px">
Link 1
</div>
<div class="menu-about-us">
<img src="test" height="40px">
Link 2
</div>
<div class="menu-book-city">
<img src="test" height="40px">Link 3 <img src="test" height="20px">Link 4 <img src="test" height="20px">Link 5<img src="test" height="20px"> Book 6
</div>
<div class="menu-rhyme-town">
<img src="test" height="40px">
Link 7
</div>
<div class="menu-fantasy-city">
<img src="test" height="40px">
Link 8
</div>
<div class="menu-advert">
<div class="advert-link-wrapper">
<div class="link-logo">
<img src="images" width="300px" height="80px">
</div>
<div class="button-wrapper" id="track-click">
<div class="visit-button">
<a><h2 class="visit-button">Visit</h2></a>
</div>
</div>
<div class="advert-hero-text-wrapper">
<div class="hero-text">
<h1 class="marketing">The best place to buy books.</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</nav>
</menu>
</div>
<script>
function toggle() {
var menu = document.getElementById('menu');
if (menu.style.display === 'none') {
menu.style.display = 'block';
} else {
menu.style.display = 'none';
}
}
</script>
body {
background: black;
}
a {
font-family: 'sans-serif';
text-decoration: none;
color: white;
font-weight: 100;
font-size: 20px;
padding: 10px 20px;
}
.homepage-menu-open {
display: inline-block;
cursor: pointer;
float: left;
}
.bar1,
.bar2,
.bar3 {
width: 40px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
border: 2%;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-6px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-7px, -8px);
}
.homepage-menu-search-icon {
position: fixed;
top: 1.8%;
right: 18%;
}
.homepage-menu-search-icon img {
cursor: pointer;
position: fixed;
float: left;
}
.links {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
section {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#menu {
background: gray;
text-align: center;
color: white;
padding: 0;
height: 100%;
}
.link-logo {
padding-top: 30px;
}
.visit-button {
padding: 0;
margin: 0;
}
There are 2 things I am having difficulty in:
1) Making the menu open and close from the hamburger menu and search button (image in the top right corner). I want to hide the submit button.
2) Aligning the images above the link.
I have created a that you can get an idea how the final menu is supposed to look like.
Have a nice day!

Make setInterval unique to element?

I have been trying to build a typing animation that is trigger for links in view while scrolling. There seems to be an issue with jquery selecting the right element or the setinterval objects being created that cause all the elements to type the same thing regardless of id selected. I have tried a few ways of making the setinterval unique to the element.
var typers = {};
var typeElem = $('.typer');
$.each(typeElem, function() {
var tElem = $(this);
var typeText = tElem.text();
tElem.data('output', typeText);
});
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//console.log(`window height ${window_height}`);
// console.log(`window top ${window_top_position}`);
// console.log(`window bott ${window_bottom_position}`);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
// console.log(element_bottom_position);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
//console.log('add');
} else {
$element.removeClass('in-view');
//console.log('remove');
}
});
var $typeTheseElements = $('a.in-view');
$.each($typeTheseElements, function() {
//console.log(this.length);
var ident = $(this).attr('id');
console.log(ident);
if ($(`#${ident}`).data("typing")) {
/// console.log(`already typing ${ident}`);
} else {
var aText = "http://";
$(`#${ident}`).data("typing", true);
// console.log($element.data('output'));
srcText = $(`#${ident}`).data('output');
// console.log(`Type: ${srcText}`);
var counter = 0;
typers[ident] = setInterval(function() {
if (counter < srcText.length) {
aText = aText + srcText.charAt(counter);
$(`#${ident}`).text(aText);
counter++;
} else {
$(`#${ident}`).data("typing", false);
clearInterval(typers[ident]);
//console.log('done typing')
}
}, 300);
//console.log(srcText);
}
// console.log('type this' );
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
#keyframes siteFocus {
0% {
width: 25%;
}
25% {
width: 50%;
}
50% {
width: 75%;
}
100% {
width: 100%;
}
}
/* The element to apply the animation to */
.sites:hover {
transition: all 3s
}
.sites {
width: 25%;
height: 15px;
padding-top: 10px;
float: left;
text-align: center;
transition: all 3s
}
.sitelinks {
color: black;
text-decoration: none;
}
.siteDescription {
display: none;
}
.intro {
font-size: 26px;
}
.intro-dot {
font-weight: bold;
font-style: normal;
}
/*These styles contain basic styles for fomatting along with our animation css*/
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
background: #efefef;
line-height: 170%;
}
strong,
b {
font-weight: 600
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
line-height: 150%;
}
i.fa {
color: #333;
}
*,
*:before,
*:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*clearfixes*/
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.main-container {
background: #fff;
max-width: 1000px;
margin: 25px auto 25px auto;
position: relative;
}
.container {
position: relative;
padding: 25px;
}
/*animation element*/
.animation-element {
opacity: 0;
position: relative;
top: 0;
}
/*animation element sliding left*/
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 3000ms linear;
-webkit-transition: all 3000ms linear;
-o-transition: all 3000ms linear;
transition: all 3000ms linear;
-moz-transform: translate3d(-300px, 0px, 0px);
-webkit-transform: translate3d(-300px, 0px, 0px);
-o-transform: translate(-300px, 0px);
-ms-transform: translate(-300px, 0px);
transform: translate3d(-300px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
.animation-element.imagep.in-view {
opacity: 1;
color: black;
white-space: nowrap;
overflow: hidden;
}
.animation-element.typer.in-view {
opacity: 1;
color: black;
white-space: nowrap;
overflow: hidden;
}
.animation-element.imagep:nth-child(2) {}
/*animation slide left styled for testimonials*/
.animation-element.slide-left.testimonial {
float: left;
width: 100%;
margin: 1% 1% 1% 1%;
background: #F5F5F5;
padding: 5px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active {
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}
.animation-element.slide-left.testimonial:nth-of-type(odd) {
width: 100%;
margin: 1% 1% 1% 1%;
}
.animation-element.slide-left.testimonial:nth-of-type(even) {
width: 100%;
margin: 1% 1% 1% 1%;
}
.animation-element.slide-left.testimonial .header {
float: left;
width: 100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .left {
float: left;
margin-right: 15px;
}
.animation-element.slide-left.testimonial .right {
float: left;
}
.animation-element.slide-left.testimonial h3 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial h4 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial .content {
float: left;
width: 100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .rating {}
.animation-element.slide-left.testimonial i {
color: #aaa;
margin-right: 5px;
}
/*media queries for small devices*/
#media screen and (max-width: 678px) {
/*testimonials*/
.animation-element.slide-left.testimonial,
.animation-element.slide-left.testimonial:nth-of-type(odd),
.animation-element.slide-left.testimonial:nth-of-type(even) {
width: 100%;
margin: 0px 0px 0px 0px;
}
.animation-element.slide-left.testimonial .right,
.animation-element.slide-left.testimonial .left,
.animation-element.slide-left.testimonial .content,
.animation-element.slide-left.testimonial .rating {
text-align: center;
float: none;
}
}
.image {
position: relative;
width: 100%;
/* for IE 6 */
margin-right: 5px;
margin-bottom: 5px;
display: block;
height: 83px;
}
.imagep {
display: block;
position: absolute;
top: 25px;
left: 130px;
width: 100%;
}
.hiddenb {
background: rgb(255, 255, 255);
position: absolute;
top: 20px;
left: 130px;
width: 50px%;
}
.imagepspan {
color: black;
font: bold 20px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(255, 255, 255);
/* fallback color */
background: rgba(255, 255, 255, 1);
padding: 2px;
}
.imagepspan a {
color: black;
font: bold 20px/45px Helvetica, Sans-Serif;
text-decoration: none;
}
p a {
color: black;
text-decoration: none;
}
.spancursor {
animation: blink 1s infinite;
}
#keyframes type {
from {
width: 0;
}
}
#keyframes type2 {
0% {
width: 0;
}
50% {
width: 0;
}
100% {
width: 100;
}
}
#keyframes blink {
to {
opacity: .0;
}
}
::selection {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" type="text/css" href="public/style.css">
<script src="public/jquery.min.js" type="text/javascript"></script>
<script src="public/animations.js" type="text/javascript"></script>
</head>
<body>
<div class="main-container">
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test1.ca</span><span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test2.ca
</span><span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test3.ac
</span><span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test4</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test5</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test6</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test7</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test8</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test9</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test10</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test11</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test12</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test13</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test14</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test15</span>
<span class="spancursor">|</span></p>
</div>
</div>
<div class="animation-element slide-left testimonial">
<div class="image">
<image src="public/chromeBar.png" alt="" />
<p class="animation-element imagep"><span class="imagepspan">test16</span>
<span class="spancursor">|</span></p>
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>

You need to declare the srcText variable in .each() otherwise you are creating a single global variable. each.() iterates though the entire list before your setInterval function is called and so scrText is left with the last value in the iteration.
To fix, add the var to declare a local variable in the function:
var srcText = $(`#${ident}`).data('output');

Content Slider stop and start in accordion

I have code below for a Pure CSS content slider in an accordion I have created. Is it possible to start and stop the Content Slider when the accordion is opened and closed? Currently the Content Slider keeps running even if the accordion is closed. Is this possible with Pure CSS? If not would this be possible with Vanilla JavaScript (no JQuery). Anything helps, cheers.
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
overflow: hidden;
}
.bold {
font-weight:bold;
color: #005bab;
}
.top {
margin-top:-20px;
text-align: center;
font-size:13px;
}
.input {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
position: relative;
text-align: center;
display: block;
padding: 0 0 0 1em;
color: #005bab;
background: #e2ecf6;
font-size: 14px;
font-family: Verdana;
font-weight: bold;
line-height: 6;
cursor: pointer;
}
.label:hover {
background-color: #d2e2ef;
}
.tab-content {
max-height: 0;
overflow: hidden;
padding: 0px;
-webkit-transition: max-height .5s;
-o-transition: max-height .5s;
transition: max-height .5s;
padding-left: 35px;
background: #dce7f2;
}
.tab-content .container {
padding: 1em;
margin: 0;
opacity: 0;
transform: scale(0.75);
-webkit-transition: transform 0.75s, opacity .75s;
-o-transition: transform 0.75s, opacity .75s;
transition: transform 0.75s, opacity .75s;
background: #f4f8fc;
}
/* :checked */
.input:checked~.tab-content {
max-height: 35em;
}
.input:checked~.tab-content .container {
transform: scale(1);
opacity: 1;
}
/* Icon */
.label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.input[type=checkbox]+.label::after {
content: "+";
}
.input[type=radio]+.label::after {
content: "";
}
.input[type=checkbox]:checked+.label::after {
transform: rotate(315deg);
}
.input[type=radio]:checked+.label::after {
transform: rotateX(180deg);
}
.bottombar {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #00688B;
}
/* all position:absolute removed */
#scroller {
overflow:hidden;
}
#scroller .innerScrollArea {
}
#scroller ul {
padding: 0;
position: relative;
display:flex;/* UPDATE */
}
#scroller li {
padding: 0;
list-style-type: none;
}
.circle {
width: 130px;
height: 130px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:5px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 12px;
text-align: center;
width: 200px;
top: 45px;
margin-left:-35px;
bottom: 0;
position: absolute;
z-index: 99;
}
.circleinv{
width: 130px;
height: 130px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:5px;
border-color:transparent;
}
.arrow {
width:145px;
height:45px;
}
.arrowinv {
visibility:hidden;
width:145px;
height:50px;
}
.flipimage {
width:145px;
height:45px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
/* UPDATE for animation */
.ul {
animation: slidli 90s infinite linear;
}
.ul:hover {
animation-play-state:paused;
}
#keyframes slidli {
100% {
transform:translatex(-733.5%);/* this is to be update to the content with to see every element slide once untill copies/clone comes back at same spot */
}
}
<div class="top">
<p>
<span style="font-family: verdana;"><strong>Click the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>" to expand and the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>" to collapse</strong></span></p>
</div>
<div class="wrapper">
<div class="tab">
<input name="tabs" class="input" id="tab-one" type="checkbox"/>
<label class="label" for="tab-one">Content Slider</label>
<div class="tab-content">
<div class="container">
<div class="everything">
<div id="scroller" style="width: 400px; height: 255px; margin: 0 auto;">
<div class="innerScrollArea">
<ul class="ul">
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<!--Dupes-->
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<!--Dupe 2-->
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<!--Dupe 3-->
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottombar"></div>
</div>

I would normally advise that you do this kind of stuff with JS but if you want to avoid it here's a working (albeit verbose) solution:
replace
.ul:hover {
animation-play-state:paused;
}
with
.input:checked~.tab-content .container .ul:hover {
animation-play-state:paused;
}
.tab-content .container .ul{
animation-play-state:paused;
}
.input:checked~.tab-content .container .ul {
animation-play-state:running;
}
Here's a pen showing the solution.
https://codepen.io/anon/pen/zzaKow

Develop Reference

JavaScript is the programming language of the Web.

How do I make the slider go 100% of the page - javascript

Remove the padding from the class "bit-3".

Related

How to get smooth transition of caraousel slides

I want to add a circular ripple hover effect on image

Menu Open Issue and Image Alignment Issue

Make setInterval unique to element?

Content Slider stop and start in accordion

Categories

Resources