We Keep Coding

Cant make a slider

   I cant make a button change images
 This Is my HTML.
.slider {
&__wrapper {
background-color: #eeeeee;
padding: 0 10%;
margin-top: 2.6%;
}
&__image1 {
width: 100%;
}
&__myslides {
background-color: white;
}
&__image2 {
width: 100%;
display: none;
}
&__image3 {
width: 100%;
display: none;
}
&__buttons {
text-align: center;
background-color: black;
opacity: .5;
}
&__buttons button {
height: 35px;
width: 35px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
cursor: pointer;
margin: 5px;
}
&__buttons button:hover {
opacity: .1;
}
}
<div class="slider">
<div class="container">
<div class="slider__wrapper">
<div class="slider__myslides">
<img src="https://picsum.photos/200/300" alt="robot" class="slider__image1" id="image1" />
</div>
<div class="slider__myslides">
<img src="https://picsum.photos/200/300" alt="space" class="slider__image2" id="image2" />
</div>
<divclass="slider__myslides">
<img src="https://picsum.photos/200/300" alt="space" class="slider__image3" id="image2" />
</div>
<div class="slider__buttons">
<button class="slider__1" id="btn1">1</button>
<button class="slider__2" id="btn2">2</button>
<button class="slider__3" id="btn3">3</button>
</div>
</div>
</div>
</div>
I tried to add class active to transform display none image into Flex. It works.
i can also turn flex into none.
But i can only do it seperatly. I cant make both things happen with just One Burton.

How to Limit Elements on a Screen?

I have 4 boxes, (which will later be 9), in which I want there to be a total of 3 on screen at all times, excluding mobile. The remainder who are not on screen will be moved to the right end of the box line, but be unseen. I have looked around for a method to accomplish this via HTML & CSS and have found none. Is there a way to do this with HTML, CSS, or JS?
.bioSlider {
position: relative;
display: flex;
justify-content: center;
overflow: hidden;
}
.box {
position: relative;
display: inline-block;
width: 390px;
padding: 10px;
}
.slideImage {
position: relative;
height: 300px;
}
.slideImage img {
object-fit: cover;
box-sizing: border-box;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #000000;
opacity: 0;
transition: 0.6s ease-in-out;
}
.quoteText {
position: absolute;
text-align: left;
font-style: italic;
word-break: break-all;
padding: 30px;
top: 30px;
color: #e5e5e5;
opacity: 0;
transition: 0.6s ease-in-out;
}
.detailBox {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 100%;
padding: 9px;
background-color: #e8e8e8;
}
.slideImage:hover .overlay {
opacity: 50%;
}
.slideImage:hover .quoteText {
opacity: 100%;
}
<div>
<!-- Cadet Slider -->
<ul class='bioSlider'>
<li class='cadetOne'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Red_Card.png' alt=''>
<div class='overlay'> </div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion CDR <br> LTC Chase Hinson</h3>
</div>
</div>
</div>
</li>
<li class='cadetTwo'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Yellow_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion XO <br> MAJ Grayson Akins</h3>
</div>
</div>
</div>
</li>
<li class='cadetThree'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Blue_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion NCO <br> CSM Janecia Bass</h3>
</div>
</div>
</div>
</li>
<li class='cadetFour'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Green_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion S1 <br> CPT Lauren Newton</h3>
</div>
</div>
</div>
</li>
</ul>
</div>

How do I display modal images with hover effect captions?

I have a responsive image grid, which is working fine and i am happy with.
Now i would like to add hover effects to the images so that a white semi-transparent filter is applied and text appears over the images with further details on the image.
I would also like the images to be modal and popup when clicked on.
It seems when i apply the hover effects the popup image stops working.
Can anybody tell me what is going wrong?
NOTE: I'm aware that hover effects have not been applied to all the images. This is because i didnt bother when i realised it wasnt functioning.
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = event.target.src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
img {
border: 2px solid;
min-height: 100px;
min-width: 100px;
}
body {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
font-family: verdana
}
/*MAIN*/
main {
margin: 200px 0 100px 0;
height: auto;
max-width: 1024px;
color: #66704D;
letter-spacing: 3px;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px 4px 2%;
}
.column {
flex: 31.3%;
max-width: 31.3%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/*overlay*/
.container {
position: relative;
width: 100%;
}
.ImgThumbnail {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(255,255,255,0.9);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: #66704d;
font-size: 20px;
letter-spacing: 5px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
/*modal*/
.ImgThumbnail {
cursor: pointer;
transition: 0.3s;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(255, 255, 255,0.85);
}
.modalImage {
margin: auto;
display: block;
width: 100%;
height: auto;
max-width: 1024px;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #66704d;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.modalImage {
width: 100%;
}
}
/*Tablet*/
#media (max-width:768px) {
.column {
flex: 47%;
max-width: 47%;
}
/*Mobile*/
#media (max-width:400px) {
.column {
flex: 100%;
max-width: 100%;
}
}
<html>
<body>
<!--MAIN CONTENT-->
<main>
<div class="row">
<div class="column">
<div class="container">
<img class="ImgThumbnail" src="images/Painting/Oranges in Berlin.jpg" alt="">
<div class="overlay">
<div class="text">caption content</div>
</div>
</div>
<img class="ImgThumbnail" src="images/Painting/Bread Rolls.jpeg" alt="">
<img class="ImgThumbnail" src="images/Painting/the Market.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Life Drawing with card.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Copy of The Carrofs IV.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Carrofs I.JPG" alt="">
<img class="ImgThumbnail" src="images/Painting/The Trig, from memory.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Beacon.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Farm on the Hill.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Terrace Sunlight.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Across the Road.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Back Lane I.jpg" alt="">
</div>
<div class="column">
<img class="ImgThumbnail" src="images/Painting/Cloud Study.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/ London Bodies.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Cloud.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Life Drawing II.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Copy of The Carrofs III.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The cow Field.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Bridal Veil, from memory.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Sheep_s Pool.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Bunyan_s Valley.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Terrace Sunlight Study II .jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Back Lane.jpg" alt="">
</div>
<div class="column">
<img class="ImgThumbnail" src="images/Painting/Maria_s House.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/on The Tube.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Ben.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Life Drawing I.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Carrofs II.JPG" alt="">
<img class="ImgThumbnail" src="images/Painting/Aotea Harbor.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Aotea from description I.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/The Valley.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Bunyans Oak.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Terrace Sunlight Study I.jpg" alt="">
<img class="ImgThumbnail" src="images/Painting/Back Lane II.jpg" alt="">
</div>
</div>
<div class="modal">
<span class="close">×</span>
<img class="modalImage" id="img01">
</div>
</main>
</body>
</html>

Welcome to the forum :)
It sounds like when the cursor is hovering over your image, the hover state is essentially layered on top of your clickable image element and therefore blocking the user from clicking it and activating the pop-up modal. Try adding your listener to your hover state element as well, or grouping the caption with the image so they can both be clicked on. I've paired down your example for this snippet below.
Cheers!
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".overlay")).forEach(item => {
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = event.target.parentNode.querySelector(".ImgThumbnail").src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
body {
color: #66704D;
letter-spacing: 3px;
}
/*overlay*/
.container {
position: relative;
width: 300px;
height: 200px;
}
.ImgThumbnail {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(255, 255, 255, 0.9);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: #66704d;
font-size: 20px;
letter-spacing: 5px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
/*modal*/
.ImgThumbnail {
cursor: pointer;
transition: 0.3s;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(255, 255, 255, 0.85);
}
.modalImage {
margin: 0 auto;
display: block;
width: 80%;
height: auto;
max-width: 1024px;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #66704d;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.modalImage {
width: 100%;
}
}
<div class="container">
<div class="imgGroup">
<img class="ImgThumbnail" src="https://placehold.it/300x200" alt="">
<div class="overlay">
<div class="text">caption content</div>
</div>
</div>
</div>
<div class="modal">
<span class="close">×</span>
<img class="modalImage" id="img01">
</div>

Check out demo: https://codepen.io/turibamwe/pen/xxwGozx
use this javascript:
<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail + .overlay")).forEach(item => {
var itemImage = item.parentNode.firstElementChild.getAttribute("src");
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = itemImage//event.target.src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
</script>

Bootstrap pill content not going away

I am using bootstrap's pill nav bar and for some reason once I add my code which contains tiles that give a netflix feel (on the STEMuli tab), the navbar will no longer remove the content when going to another tab. It actually will add the next tabs information directly below. I thought I was missing some div tags, but I took away some code and rebuilt it to double check, div tags checkout. I am not sure what could cause this? Because right when I remove the content in my "STEMuli" tab in the actual code and just add some plain text it works just fine, even if I add a row to it...I am stuck please help!
.popover-header{
color:#000000;
}
#row{
overflow: hidden;
}
.logo{
z-index:0;
}
.row {
overflow: scroll;
width: 100%;
z-index: 1;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 50px 0;
padding-bottom: 30px;
padding-bottom: 30px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
margin-right: 10px;
margin-left: 50px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:before {
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}
a:hover{
color: #F1D302;
}
.checkbox-wrapper {
height: 13px;
width: 13px;
}
.btn{
background-color: #F1D302;
}
body {
font-family: 'Rubik', sans-serif;
}
.card-img-top {
height: 300px;
width: 100%;
}
.btn-xlong {
padding: 10px 50px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.steps-form-3 {
width: 2px;
height: 470px;
position: relative; }
.steps-form-3 .steps-row-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.steps-form-3 .steps-row-3:before {
top: 14px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 100%;
background-color: #7283a7; }
.steps-form-3 .steps-row-3 .steps-step-3 {
height: 150px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative; }
.steps-form-3 .steps-row-3 .steps-step-3.no-height {
height: 50px; }
.steps-form-3 .steps-row-3 .steps-step-3 p {
margin-top: 0.5rem; }
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
width: 60px;
height: 60px;
border: 2px solid #59698D;
background-color: white !important;
color: #59698D !important;
border-radius: 50%;
padding: 18px 18px 15px 15px;
margin-top: -22px; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
border: 2px solid #4285F4;
color: #4285F4 !important;
background-color: white !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
font-size: 1.7rem; }
::-webkit-scrollbar{
width: 0px;
height:5px;
background-color: #161925;
}
::-webkit-scrollbar-thumb{
background-color: #F1D302;
border-radius:10px;
box-shadow: insert 0 0 6px rgba(0,0,0,.3);
}
.spacing{
padding: 6px;
}
/*This css file defines the color scheme and font of all of the webpages so import into every new webpage*/
body {
font-family: 'Rubik', sans-serif;
background-color: #9E2B25;
color:#FDFFFC;
}
h4{
color:#FDFFFC;
}
.button{
background-color:#0267C1;
}
.nav-pills .nav-link.active
{
background-color: #0267c1;
}
h3{
color: #ffffff;
}
#cardimg
{
height:300px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet">
<link href="/css/mastercss.css" rel="stylesheet">
<link rel="stylesheet" href="/css/profile.css" crossorigin="anonymous">
<script src="/js/moment.js"></script>
</head>
<script>
(function() {
('[data-toggle="popover"]').popover()
})
</script>
<body>
<!--This is where the logo is-->
<div id="row" class="row h-100 justify-content-center">
<img src="/img/tcb-logo.png" class="img-fluid" alt="Responsive image">
</a>
</div>
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-STEM" role="tab" aria-controls="pills-home" aria-selected="true"><h3>STEMuli</h3></a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-Community" role="tab" aria-controls="pills-profile" aria-selected="false"><h3>Community</h3></a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-aboutUs" role="tab" aria-controls="pills-contact" aria-selected="false"><h3>Who We Are</h3></a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-STEM" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row">
<h2>Credit</h2>
<div class="row__inner">
<a onclick="redirectbankon()">
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-html="true" title="Description" data-content="The Bank On It module provides an overview of banking services and is designed to help participants build a positive relationship with a financial institution.">
<div class="tile__media">
<img class="tile__img" src="/img/bankonit.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Bank On It</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/borrowing.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Borrowing Basics</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/keepitsafe.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Keep it Safe</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/checkitoutpt1.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Check It Out</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/yourownhome.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Your Own Home</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-Community" role="tabpanel" aria-labelledby="pills-profile-tab">How are you</div>
<div class="tab-pane fade" id="pills-aboutUs" role="tabpanel" aria-labelledby="pills-contact-tab">.</div>
</div>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/JavaScript" src="/js/redirect.js"></script>
<script type="text/JavaScript" src="/js/form.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>

You have a lot of invalid HTML markup, somewhere unclosed tags and an unknown </main> tag in the end before the body, an unclosed <a href='#.' onclick="redirectbankon()"> which is wrapping the nested div.tile which is ok if you are using HTML5 but you still need to close it. A better way would be to provide an id to the anchor and then bind the click event to the anchor to call the function on click.
Remove the flaws in your HTML and it will work correctly by replacing the content rather than adding the tab underneath the first.
See a demo below of your code.
.popover-header {
color: #000000;
}
#row {
overflow: hidden;
}
.logo {
z-index: 0;
}
.row {
overflow: scroll;
width: 100%;
z-index: 1;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 50px 0;
padding-bottom: 30px;
padding-bottom: 30px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
margin-right: 10px;
margin-left: 50px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:before {
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover~.tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}
a:hover {
color: #F1D302;
}
.checkbox-wrapper {
height: 13px;
width: 13px;
}
.btn {
background-color: #F1D302;
}
body {
font-family: 'Rubik', sans-serif;
}
.card-img-top {
height: 300px;
width: 100%;
}
.btn-xlong {
padding: 10px 50px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.steps-form-3 {
width: 2px;
height: 470px;
position: relative;
}
.steps-form-3 .steps-row-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.steps-form-3 .steps-row-3:before {
top: 14px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 100%;
background-color: #7283a7;
}
.steps-form-3 .steps-row-3 .steps-step-3 {
height: 150px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative;
}
.steps-form-3 .steps-row-3 .steps-step-3.no-height {
height: 50px;
}
.steps-form-3 .steps-row-3 .steps-step-3 p {
margin-top: 0.5rem;
}
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
width: 60px;
height: 60px;
border: 2px solid #59698D;
background-color: white !important;
color: #59698D !important;
border-radius: 50%;
padding: 18px 18px 15px 15px;
margin-top: -22px;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
border: 2px solid #4285F4;
color: #4285F4 !important;
background-color: white !important;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
font-size: 1.7rem;
}
::-webkit-scrollbar {
width: 0px;
height: 5px;
background-color: #161925;
}
::-webkit-scrollbar-thumb {
background-color: #F1D302;
border-radius: 10px;
box-shadow: insert 0 0 6px rgba(0, 0, 0, .3);
}
.spacing {
padding: 6px;
}
/*This css file defines the color scheme and font of all of the webpages so import into every new webpage*/
body {
font-family: 'Rubik', sans-serif;
background-color: #9E2B25;
color: #FDFFFC;
}
h4 {
color: #FDFFFC;
}
.button {
background-color: #0267C1;
}
.nav-pills .nav-link.active {
background-color: #0267c1;
}
h3 {
color: #ffffff;
}
#cardimg {
height: 300px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet">
<link href="/css/mastercss.css" rel="stylesheet">
<link rel="stylesheet" href="/css/profile.css" crossorigin="anonymous">
<script src="/js/moment.js"></script>
</head>
<script>
(function () {
('[data-toggle="popover"]').popover()
})
</script>
<body>
<!--This is where the logo is-->
<div id="row" class="row h-100 justify-content-center">
<img src="/img/tcb-logo.png" class="img-fluid" alt="Responsive image">
</div>
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-STEM" role="tab" aria-controls="pills-home"
aria-selected="true">
<h3>STEMuli</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-Community" role="tab" aria-controls="pills-profile"
aria-selected="false">
<h3>Community</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-aboutUs" role="tab" aria-controls="pills-contact"
aria-selected="false">
<h3>Who We Are</h3>
</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-STEM" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row">
<h2>Credit</h2>
<div class="row__inner">
<a href='#.' onclick="redirectbankon()">
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-html="true" title="Description"
data-content="The Bank On It module provides an overview of banking services and is designed to help participants build a positive relationship with a financial institution.">
<div class="tile__media">
<img class="tile__img" src="/img/bankonit.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Bank On It</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/borrowing.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Borrowing Basics</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/keepitsafe.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Keep it Safe</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/checkitoutpt1.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Check It Out</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/yourownhome.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Your Own Home</h5>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-Community" role="tabpanel" aria-labelledby="pills-profile-tab">How are you</div>
<div class="tab-pane fade" id="pills-aboutUs" role="tabpanel" aria-labelledby="pills-contact-tab">.</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/JavaScript" src="/js/redirect.js"></script>
<script type="text/JavaScript" src="/js/form.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>

Add pointer to active Tab to show

I have created a video gallery to show 4 videos in a tabbed manner.
Functionality is working fine and design is also working but i need add pointer/arrow pointing to active video in the second column
// Video Tabs script
InitPlayVideoTabs();
function InitPlayVideoTabs() {
$('.hp-video-a').click(function (e) {
// alert('inside function');
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="100%" class="hp-active-iframe" min-height="324" src="http://www.youtube.com/embed/' + URL + '?showinfo=0&autoplay=1" frameborder="0" allowfullscreen="1" ></iframe>';
$('.hp-video-a').css("background","none");
$(this).css("background","#eee");
//code to autoplay video
//$(".hp-active-iframe")[0].src += "&autoplay=1";
//ev.preventDefault();
// alert(URL);
$(".hp-active-video-title").html($(this).find(".hp-video-title").html());
$(".hp-active-video-date").html($(this).find(".hp-video-date").html());
$('.hp-active-iframe').attr('src', URL);
return false;
});
}
.full-container{width:100%;}
.full-container {
width: 100%;
margin: 25px 0;
padding: 25px 0;
}
.content-wrapper{
padding-top:0px;
background-color:none;
max-width:1040px;
max-width:1170px;
}
.hp-video-embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 0px;
}
.hp-video-left-col{}
.hp-video-right-col a:first-child{ background-color:#ddd;}
.hp-video-right-col a:last-child{ margin-bottom:0px;}
.hp-active-iframe-wrapper {
float: left;
width: 100%;
background-color: #f5f5f5;
}
.hp-video-embed-container iframe, .hp-embed-container object, .hp-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hp-video-item-w{
background-color:#ccc;
}
.hp-hqdefault-w {
max-height: 66px;
max-width: 120px;
overflow: hidden;
position: relative;
width:30%;
}
.hp-video-img-w {
position: relative;
width: 100%;
overflow: hidden;
float:left;
}
.hp-video-details{
width:65%;
float:left;
}
.hp-video-title{
font-size:20px;
margin-top:0px;
margin-left:10px;
}
.hp-video-title{
font-size:13px;
font-weight:700;
padding-top:10px;
margin-top:0px;
margin-left:10px;
}
.hp-video-a{
display:inline-block;
width:100%;
margin-bottom:7px;
}
#media (max-width:991px)
{
.hp-video-left-col{
width:100%;
}
.hp-video-right-col {
width:100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-container bg-light-gray">
<div class="container content-wrapper">
<div class="row">
<div class="col-md-7 col-sm-6 hp-video-left-col">
<div class="hp-active-iframe-wrapper hp-video-embed-container">
<iframe id='activeIFrame' class='hp-active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1" ></iframe>
</div>
</div>
<div class="col-md-5 col-sm-6 hp-video-right-col">
<a class="hp-video-a" href="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/WzQBSlNqs-k/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road ONE </h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/uKar-9RCRnI?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/uKar-9RCRnI/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road TWOOOOOO</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Three</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/zUTi89FhSRo?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/zUTi89FhSRo/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Four</h3>
</div>
</a>
</div>
</div>
</div>
</div>
Edit: Code indentation fixed for code
IMAGE
CodePen https://codepen.io/anon/pen/dePoLr

You can use a class to add the triangle. I've documented in the sources what I have added/removed/changed. The HTML is untouched.
You just need to set the triangle for the initial load.
// Video Tabs script
InitPlayVideoTabs();
function InitPlayVideoTabs() {
$('.hp-video-a').click(function(e) {
// alert('inside function');
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="100%" class="hp-active-iframe" min-height="324" src="http://www.youtube.com/embed/' + URL + '?showinfo=0&autoplay=1" frameborder="0" allowfullscreen="1" ></iframe>';
$('.hp-video-a').css("background", "none");
$(this).css("background", "#eee");
$(".hp-active-video-title").html($(this).find(".hp-video-title").html());
$(".hp-active-video-date").html($(this).find(".hp-video-date").html());
$('.hp-active-iframe').attr('src', URL);
/* Added */
$('.hp-video-img-w.hp-hqdefault-w').removeClass("active");
$(this).find('.hp-video-img-w.hp-hqdefault-w').addClass("active");
return false;
});
}
.full-container {
width: 100%;
}
.full-container {
width: 100%;
margin: 25px 0;
padding: 25px 0;
}
.content-wrapper {
padding-top: 0px;
background-color: none;
max-width: 1040px;
max-width: 1170px;
}
.hp-video-embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 0px;
}
.hp-video-left-col {}
.hp-video-right-col a:first-child {
background-color: #ddd;
}
.hp-video-right-col a:last-child {
margin-bottom: 0px;
}
.hp-active-iframe-wrapper {
float: left;
width: 100%;
background-color: #f5f5f5;
}
.hp-video-embed-container iframe,
.hp-embed-container object,
.hp-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hp-video-item-w {
background-color: #ccc;
}
.hp-hqdefault-w {
max-height: 66px;
max-width: 120px;
/* overflow: hidden; removed */
position: relative;
width: 30%;
}
.hp-video-img-w {
position: relative;
width: 100%;
/* overflow: hidden; removed */
float: left;
}
/* Added */
.hp-video-img-w.hp-hqdefault-w.active::before {
content: "";
position: absolute;
left: -30px;
top: 25px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 30px;
border-color: transparent transparent transparent red;
}
.hp-video-details {
width: 65%;
float: left;
}
.hp-video-title {
font-size: 20px;
margin-top: 0px;
margin-left: 10px;
}
.hp-video-title {
font-size: 13px;
font-weight: 700;
padding-top: 10px;
margin-top: 0px;
margin-left: 10px;
}
.hp-video-a {
display: inline-block;
width: 100%;
margin-bottom: 7px;
}
#media (max-width:991px) {
.hp-video-left-col {
width: 100%;
}
.hp-video-right-col {
width: 100%;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-container bg-light-gray">
<div class="container content-wrapper">
<div class="row">
<div class="col-md-7 col-sm-6 hp-video-left-col">
<div class="hp-active-iframe-wrapper hp-video-embed-container">
<iframe id='activeIFrame' class='hp-active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1"></iframe>
</div>
</div>
<div class="col-md-5 col-sm-6 hp-video-right-col">
<a class="hp-video-a" href="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/WzQBSlNqs-k/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road ONE </h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/uKar-9RCRnI?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/uKar-9RCRnI/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road TWOOOOOO</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Three</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/zUTi89FhSRo?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/zUTi89FhSRo/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Four</h3>
</div>
</a>
</div>
</div>
</div>
</div>

Can you check this:
I have added few code:
In CSS:
.hp-video-right-col a:active i.right, .hp-video-right-col a:focus i.right{
border: solid black;
border-width: 0 6px 6px 0;
display: inline-block;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
In code inside all a tags:
<div style="float:left; padding-right:10px; padding-top:25px">
<i class="right"></i>
</div>
Working fiddle is below:
// Video Tabs script
InitPlayVideoTabs();
function InitPlayVideoTabs() {
$('.hp-video-a').click(function(e) {
// alert('inside function');
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="100%" class="hp-active-iframe" min-height="324" src="http://www.youtube.com/embed/' + URL + '?showinfo=0&autoplay=1" frameborder="0" allowfullscreen="1" ></iframe>';
$('.hp-video-a').css("background", "none");
$(this).css("background", "#eee");
//code to autoplay video
//$(".hp-active-iframe")[0].src += "&autoplay=1";
//ev.preventDefault();
// alert(URL);
$(".hp-active-video-title").html($(this).find(".hp-video-title").html());
$(".hp-active-video-date").html($(this).find(".hp-video-date").html());
$('.hp-active-iframe').attr('src', URL);
return false;
});
}
.full-container {
width: 100%;
}
.full-container {
width: 100%;
margin: 25px 0;
padding: 25px 0;
}
.content-wrapper {
padding-top: 0px;
background-color: none;
max-width: 1040px;
max-width: 1170px;
}
.hp-video-embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 0px;
}
.hp-video-left-col {}
.hp-video-right-col a:first-child {
background-color: #ddd;
}
.hp-video-right-col a:active i.right,
.hp-video-right-col a:focus i.right {
border: solid black;
border-width: 0 6px 6px 0;
display: inline-block;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.hp-video-right-col a:last-child {
margin-bottom: 0px;
}
.hp-active-iframe-wrapper {
float: left;
width: 100%;
background-color: #f5f5f5;
}
.hp-video-embed-container iframe,
.hp-embed-container object,
.hp-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hp-video-item-w {
background-color: #ccc;
}
.hp-hqdefault-w {
max-height: 66px;
max-width: 120px;
overflow: hidden;
position: relative;
width: 30%;
}
.hp-video-img-w {
position: relative;
width: 100%;
overflow: hidden;
float: left;
}
.hp-video-details {
width: 65%;
float: left;
}
.hp-video-title {
font-size: 20px;
margin-top: 0px;
margin-left: 10px;
}
.hp-video-title {
font-size: 13px;
font-weight: 700;
padding-top: 10px;
margin-top: 0px;
margin-left: 10px;
}
.hp-video-a {
display: inline-block;
width: 100%;
margin-bottom: 7px;
}
#media (max-width:991px) {
.hp-video-left-col {
width: 100%;
}
.hp-video-right-col {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-container bg-light-gray">
<div class="container content-wrapper">
<div class="row">
<div class="col-md-7 col-sm-6 hp-video-left-col">
<div class="hp-active-iframe-wrapper hp-video-embed-container">
<iframe id='activeIFrame' class='hp-active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1"></iframe>
</div>
</div>
<div class="col-md-5 col-sm-6 hp-video-right-col">
<a class="hp-video-a" href="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1">
<div style="float:left; padding-right:10px; padding-top:25px"><i class="right"></i></div>
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/WzQBSlNqs-k/hqdefault.jpg" style="clear:both;" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road ONE </h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/uKar-9RCRnI?showinfo=0&modestbranding=1">
<div style="float:left; padding-right:10px; padding-top:25px"><i class="right"></i></div>
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/uKar-9RCRnI/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road TWOOOOOO</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
<div style="float:left; padding-right:10px; padding-top:25px"><i class="right"></i></div>
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Three</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/zUTi89FhSRo?showinfo=0&modestbranding=1">
<div style="float:left; padding-right:10px; padding-top:25px"><i class="right"></i></div>
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/zUTi89FhSRo/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Four</h3>
</div>
</a>
</div>
</div>
</div>
</div>
codepen : https://codepen.io/anon/pen/mLyeBP