hey i want to create responsive testimonials slider somthing like the image but without using swiperjs or anything. just pure html css javascript if anyone can help me please
I already create my code here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--first_color: #15241c;
--second-color: #09382f;
--third-color: #FF882E;
--fourth-color:#E55E2E;
--fifth-color:#F8F1E0;
--sixth-color : #EC9937;
}
.Testimonials {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
max-width: 100%;
margin: 40px 0px;
}
.Testimonials_title h2 {
font-size: 42px;
letter-spacing: -2px;
font-weight: 700;
letter-spacing: 0;
margin-bottom: 30px;
text-align: center;
color: var(--first_color);
}
.Testimonials_title>p {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 40px;
font-weight: 300;
text-align: center;
}
.testimonials_container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
}
.testimonials_container_center {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.testimonials_content {
position: relative;
transition: all .3s ease-in-out;
transform: scale(0.9);
opacity: 0.9;
}
.testimonials_avatar {
position: absolute;
left: 50%;
top: -30px;
width: 90px;
height: 90px;
margin-left: -45px;
z-index: 1;
}
.testimonials_avatar img {
width: 90px;
height: 90px;
border-radius: 100%;
border: 6px solid #fff;
box-shadow: 0 9px 26px rgba(58, 87, 135, 0.1);
}
.testimonials_text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 75px 50px 75px;
overflow: hidden;
background: var(--third-color);
border: 1ps solid #f1f1f1;
border-radius: 10px;
transition: all .3s ease-in-out;
}
.testimonials_text_after {
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
color: var(--fifth-color);
opacity: .3;
font-size: 35px;
transition: all 400ms linear;
bottom: 25px;
right: 30px;
}
.testimonials_text_before {
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
color: var(--fifth-color);
opacity: .3;
font-size: 35px;
transition: all 400ms linear;
top: 25px;
left: 30px;
}
.testimonials_text p {
color: var(--second-color);
font-size: 14px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
line-height: 24px;
padding-bottom: 10px;
font-weight: 500;
}
.testimonials_information h3 {
font-weight: 600;
color: var(--second-color);
;
font-size: 18px;
}
.testimonials_information h4 {
font-weight: 400;
font-size: 12px;
padding-top: 6px;
color: var(--second-color);
;
}
.testimonials_container_center .active {
opacity: 1;
transform: scale(1.0);
width: 100%;
flex-grow: 6;
}
.testimonials_container_center .active .testimonials_text {
background: var(--fourth-color);
box-shadow: 0 9px 26px rgba(58, 87, 135, 0.1);
}
.listing-carousel-button {
position: relative;
width: 80px;
height: 50px;
z-index: 1;
cursor: pointer;
background: var(--second-color);
box-shadow: 0 9px 26px rgba(58, 87, 135, 0.45);
transition: all 200ms linear;
outline: none;
}
.listing-carousel-button.listing-carousel-button-next {
padding-right: 20px;
border-radius: 60px 0 0 60px;
}
.listing-carousel-button.listing-carousel-button-prev {
padding-left: 20px;
border-radius: 0 60px 60px 0;
}
.listing-carousel-button.listing-carousel-button-next:hover {
right: -15px;
background: rgba(6, 27, 65, 0.4);
}
.listing-carousel-button.listing-carousel-button-prev:hover {
left: -15px;
background: rgba(6, 27, 65, 0.4);
}
</style>
</head>
<body>
<section id="Testimonials">
<div class="Testimonials_top">
<div class="Testimonials_title">
<h2>Testimonials</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="Testimonials_bottom">
<div class="testimonials_container">
<div class="testimonials_container_left">
<div class="listing-carousel-button listing-carousel-button-prev"><i class="fa fa-caret-left"
style="color: #fff"></i></div>
</div>
<div class="testimonials_container_center">
<div class="testimonials_content">
<div class="testimonials_avatar">
<img src="61784903_2448694432083814_109523087682174976_n.jpg" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
<div class="testimonials_content active">
<div class="testimonials_avatar">
<img src="144937396_125411896111709_8005138515258577341_n.jpg" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
<div class="testimonials_content">
<div class="testimonials_avatar">
<img src="144739297_237956884645857_999009321808421704_n.jpg" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
</div>
<div class="testimonials_container_right">
<div class="listing-carousel-button listing-carousel-button-next"><i class="fa fa-caret-right"
style="color: #fff"></i></div>
</div>
</div>
</div>
</section>
</body>
</html>
if anyone can help please to create something like the image without using pure html css javascript and to add navigation bottom in the bottom
You can create a responsive testimonials slider using pure HTML, CSS, JavaScript.
Just Implement it according to your slider structure:
See a working example here: https://jsfiddle.net/Hamzailyas434/gcwxf1pt/6/
// Slider
const slider = function () {
const slides = document.querySelectorAll('.slide');
const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');
const dotContainer = document.querySelector('.dots');
let curSlide = 0;
const maxSlide = slides.length;
// Functions
const createDots = function () {
slides.forEach(function (_, i) {
dotContainer.insertAdjacentHTML(
'beforeend',
`<button class="dots__dot" data-slide="${i}"></button>`
);
});
};
const activateDot = function (slide) {
document
.querySelectorAll('.dots__dot')
.forEach(dot => dot.classList.remove('dots__dot--active'));
document
.querySelector(`.dots__dot[data-slide="${slide}"]`)
.classList.add('dots__dot--active');
};
const goToSlide = function (slide) {
slides.forEach(
(s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
);
};
// Next slide
const nextSlide = function () {
if (curSlide === maxSlide - 1) {
curSlide = 0;
} else {
curSlide++;
}
goToSlide(curSlide);
activateDot(curSlide);
};
const prevSlide = function () {
if (curSlide === 0) {
curSlide = maxSlide - 1;
} else {
curSlide--;
}
goToSlide(curSlide);
activateDot(curSlide);
};
const init = function () {
goToSlide(0);
createDots();
activateDot(0);
};
init();
// Event handlers
btnRight.addEventListener('click', nextSlide);
btnLeft.addEventListener('click', prevSlide);
document.addEventListener('keydown', function (e) {
if (e.key === 'ArrowLeft') prevSlide();
e.key === 'ArrowRight' && nextSlide();
});
dotContainer.addEventListener('click', function (e) {
if (e.target.classList.contains('dots__dot')) {
const { slide } = e.target.dataset;
goToSlide(slide);
activateDot(slide);
}
});
};
slider();
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
font-weight: 300;
color: #444;
line-height: 1.9;
background-color: #f3f3f3;
}
/* SLIDER */
.slider {
max-width: 100rem;
height: 50rem;
margin: 0 auto;
position: relative;
/* IN THE END */
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
width: 100%;
height: 50rem;
display: flex;
align-items: center;
justify-content: center;
/* THIS creates the animation! */
transition: transform 1s;
}
.slide > img {
/* Only for images that have different size than slide */
width: 100%;
height: 100%;
object-fit: cover;
}
.slider__btn {
position: absolute;
top: 50%;
z-index: 10;
border: none;
background: rgba(255, 255, 255, 0.7);
font-family: inherit;
color: #333;
border-radius: 50%;
height: 5.5rem;
width: 5.5rem;
font-size: 3.25rem;
cursor: pointer;
}
.slider__btn--left {
left: 6%;
transform: translate(-50%, -50%);
}
.slider__btn--right {
right: 6%;
transform: translate(50%, -50%);
}
.dots {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.dots__dot {
border: none;
background-color: #b9b9b9;
opacity: 0.7;
height: 1rem;
width: 1rem;
border-radius: 50%;
margin-right: 1.75rem;
cursor: pointer;
transition: all 0.5s;
/* Only necessary when overlying images */
/* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */
}
.dots__dot:last-child {
margin: 0;
}
.dots__dot--active {
/* background-color: #fff; */
background-color: #888;
opacity: 1;
}
/* TESTIMONIALS */
.testimonial {
width: 65%;
position: relative;
}
.testimonial::before {
content: '\201C';
position: absolute;
top: -5.7rem;
left: -6.8rem;
line-height: 1;
font-size: 20rem;
font-family: inherit;
color: var(--color-primary);
z-index: -1;
}
.testimonial__header {
font-size: 2.25rem;
font-weight: 500;
margin-bottom: 1.5rem;
}
.testimonial__text {
font-size: 1.7rem;
margin-bottom: 3.5rem;
color: #666;
}
.testimonial__author {
margin-left: 3rem;
font-style: normal;
display: grid;
grid-template-columns: 6.5rem 1fr;
column-gap: 2rem;
}
.testimonial__photo {
grid-row: 1 / span 2;
width: 6.5rem;
border-radius: 50%;
}
.testimonial__name {
font-size: 1.7rem;
font-weight: 500;
align-self: end;
margin: 0;
}
.testimonial__location {
font-size: 1.5rem;
}
.section__title--testimonials {
margin-bottom: 4rem;
}
<section class="section" id="section--3">
<div class="slider">
<div class="slide slide--1">
<div class="testimonial">
<h5 class="testimonial__header">Best financial decision ever!</h5>
<blockquote class="testimonial__text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Accusantium quas quisquam non? Quas voluptate nulla minima
deleniti optio ullam nesciunt, numquam corporis et asperiores
laboriosam sunt, praesentium suscipit blanditiis. Necessitatibus
id alias reiciendis, perferendis facere pariatur dolore veniam
autem esse non voluptatem saepe provident nihil molestiae.
</blockquote>
<address class="testimonial__author">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="" class="testimonial__photo" />
<h6 class="testimonial__name">Aarav Lynn</h6>
<p class="testimonial__location">San Francisco, USA</p>
</address>
</div>
</div>
<div class="slide slide--2">
<div class="testimonial">
<h5 class="testimonial__header">
The last step to becoming a complete minimalist
</h5>
<blockquote class="testimonial__text">
Quisquam itaque deserunt ullam, quia ea repellendus provident,
ducimus neque ipsam modi voluptatibus doloremque, corrupti
laborum. Incidunt numquam perferendis veritatis neque repellendus.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo
deserunt exercitationem deleniti.
</blockquote>
<address class="testimonial__author">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="" class="testimonial__photo" />
<h6 class="testimonial__name">Miyah Miles</h6>
<p class="testimonial__location">London, UK</p>
</address>
</div>
</div>
<div class="slide slide--3">
<div class="testimonial">
<h5 class="testimonial__header">
Finally free from old-school banks
</h5>
<blockquote class="testimonial__text">
Debitis, nihil sit minus suscipit magni aperiam vel tenetur
incidunt commodi architecto numquam omnis nulla autem,
necessitatibus blanditiis modi similique quidem. Odio aliquam
culpa dicta beatae quod maiores ipsa minus consequatur error sunt,
deleniti saepe aliquid quos inventore sequi. Necessitatibus id
alias reiciendis, perferendis facere.
</blockquote>
<address class="testimonial__author">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="" class="testimonial__photo" />
<h6 class="testimonial__name">Francisco Gomes</h6>
<p class="testimonial__location">Lisbon, Portugal</p>
</address>
</div>
</div>
<!-- <div class="slide"><img src="img/img-1.jpg" alt="Photo 1" /></div>
<div class="slide"><img src="img/img-2.jpg" alt="Photo 2" /></div>
<div class="slide"><img src="img/img-3.jpg" alt="Photo 3" /></div>
<div class="slide"><img src="img/img-4.jpg" alt="Photo 4" /></div> -->
<button class="slider__btn slider__btn--left">←</button>
<button class="slider__btn slider__btn--right">→</button>
<div class="dots"></div>
</div>
</section>
Related
I'm having a problem. More precisely, I'm just learning javascript. There is something I cannot do. I'm just summarizing.
There is a list item 7 of them. These are in the ul li structure.
Below are 7 swiper slide elements.
I'm trying to make it go to the swiper slide items below when I click on the top "ul li" structure, but I couldn't.
For example, when I click on the 6th of the " ul li " above, I want it to go to the 6th of the swiper slide below, and I also want it to work the same way when I click on the arrows.
My Code Example is below. Can anyone help?
https://embed.plnkr.co/plunk/OOTXtXkbd33K1Svt
var init = false;
function swiperCard() {
if (window.innerWidth >= 768) {
if (!init) {
init = true;
swiper2 = new Swiper(".main-slider", {
loop: false,
spaceBetween: 0,
speed:1500,
slidesPerView: 1,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
mousewheel: {
sensitivity: 1,
releaseOnEdges: true,
},
});
}
} else if (init) {
swiper2.destroy();
init = false;
}
}
swiperCard();
window.addEventListener("resize", swiperCard);
.anchor-nav {
width: 100%;
position: relative;
height: 60px;
padding-left: 10px;
}
.anchor-nav .anchor {
font-size: 16px;
position: relative;
text-align: left;
font-family: var(--bs-site-main-font-bold);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title {
padding-bottom: 10px;
position: relative;
width: 100%;
text-align: left;
position: relative;
}
.anchor-nav ul li.active .anchor {
color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title .circle {
width: 28px;
height: 20px;
display: block;
position: absolute;
background: var(--bs-white);
color: #d1d1d1;
bottom: -8px;
}
.anchor-nav .anchor .title .circle:after {
content: "";
position: absolute;
left: 50%;
right: auto;
top: 50%;
width: 8px;
height: 8px;
background: aliceblue;
border-radius: 100%;
transform:
translate(-50%, -50%);
}
.anchor-nav .anchor.active .circle:after {
background: var(--bs-site-red-color);
}
#previous,
#next {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
width: 40px;
height: 40px;
background: var(--bs-white);
border-radius: var(--bs-site-radius);
transition: var(--bs-site-transition);
flex: 0 0 40px;
max-width: 40px;
}
#previous:hover svg path,
#next:hover svg path {
stroke: var(--bs-white);
}
#previous:hover,
#next:hover {
background: var(--bs-site-red-color);
}
#previous svg path,
#next svg path {
transition: var(--bs-site-transition);
}
.anchor-nav ul::-webkit-scrollbar {
display: none;
}
.anchor-nav ul li {
flex-shrink: 0;
width: 40%;
}
.progress-bar .swiper-pagination.swiper-pagination-progressbar {
background: rgb(25 26 25 / 20%);
height: 2.5px;
}
.progress-bar .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--bs-site-red-color);
top: 0px;
}
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev {
height: auto;
margin: 0;
width: auto;
transform: translate(0, -50%);
}
.main-slider .swiper-button-next:after,
.main-slider .swiper-button-prev:after {
display: none;
}
.anchor-nav .anchor-list {
justify-content: space-between;
overflow-x: auto;
overflow-y: hidden;
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.anchor-nav ul li.active .anchor .title .circle:after {
background: var(--bs-site-red-color);
}
.queries-block.part-area {
height: calc(100% - 60px);
overflow-y: auto;
padding: 0;
margin: 0;
flex-flow: inherit;
flex-direction: column;
vertical-align: top;
justify-content: start;
}
.main-slider .swiper-wrapper {
display: block;
}
.anchor-nav .anchor.active .title {
border-color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title em {
padding-right: 10px;
width: 100%;
display: block;
position: relative;
}
.anchor-nav .anchor .title em strong {
max-height: 30px;
overflow: hidden;
display: block;
}
.anchor-nav ul li.active .anchor .title .circle:after,
.anchor-nav .swiper-initialized .swiper-slide.active .anchor .title .circle:after {
background: url(../i/play-1.svg) no-repeat !important;
width: 18px;
height: 20px;
}
#media (min-width: 768px) {
.wrapper .section-part:last-child {
min-width: auto;
flex-shrink: 0;
width: 682px;
}
.main-slider .swiper-wrapper {
display: block;
}
.wrapper .section-part {
height: calc(100vh - 134px);
position: relative;
min-width: 100vw;
flex-shrink: 0;
overflow: hidden;
}
.wrapper .section-part>.container,.wrapper .section-part>.container-fluid, .wrapper .section-part>.container>.row,.wrapper .section-part>.container-fluid>.row, .wrapper .section-part>.container>.row>div,.wrapper .section-part>.container-fluid>.row>div {
height: 100%;
}
.p-container {
max-height: 100%;
}
.main-slider .swiper-wrapper {
display: flex;
}
.anchor-nav ul li {
flex-shrink: 1;
width: 100%;
list-style-type: none;
}
.anchor-nav .anchor .title {
text-align: center;
/* border-bottom: 2px solid var(--bs-site-red-color); */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.anchor-nav .anchor .title .circle {
transform: inherit;
left: 50%;
transform: translate(-50%, 0);
}
.anchor-nav .anchor {
font-size: 12px;
}
.anchor-nav {
padding: 0;
}
.part-head {
padding-top: 0;
}
.anchor-nav ul li.active~li .anchor {
color: rgb(25 26 25 / 30%);
}
.anchor-nav ul li.active~li .anchor .title:before {
background: #d1d1d1;
width: 0;
}
.anchor-nav .anchor .title:before {
content: "";
position: absolute;
bottom: 15px;
left: 0;
height: 2px;
width: 100%;
transition: all 0.25s ease;
background: var(--bs-site-red-color);
}
.anchor-nav .anchor .title:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 15px;
height: 2px;
background: #d1d1d1;
z-index: -1;
}
.anchor-nav ul li:first-child .anchor .title:after {
left: 40%;
}
.anchor-nav ul li:first-child .anchor .title:before {
left: 40%;
width: 60%;
}
.anchor-nav ul li.active .anchor em:before {
content: "";
position: absolute;
left: 45%;
bottom: -5px;
height: 2px;
background: #d1d1d1 !important;
width: 55%;
}
.anchor-nav ul li .anchor .title .circle:after {
background: var(--bs-site-red-color);
}
.anchor-nav ul li.active~li .anchor .circle:after {
background: #d1d1d1;
}
.anchor-nav .anchor .title em {
height: 40px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
line-height: 15px;
}
.anchor-nav .anchor .title .circle {
bottom: 6px;
}
.anchor-nav ul li.nonelist:last-child .anchor .title:after,
.anchor-nav ul li.nonelist:last-child .anchor .title:before {
width: 50%;
background: #d1d1d1 !important;
}
.anchor-nav ul li:last-child .anchor .title em:before {
display: none;
}
.anchor-nav ul li.nonelist:last-child .anchor .title:after {
left: calc(-50% + 10px);
}
.anchor-nav ul li.anchor.nonelist .title {
color: #5a5a5a;
}
.nonelist.active:last-child .anchor .title:before,
.anchor-nav .nonelist.active .anchor .title:after {
background: #5a5a5a !important;
}
.anchor-nav ul li.nonelist.title .circle:after {
background: #5a5a5a !important;
width: 8px;
height: 8px;
}
.anchor-nav ul li.active~li.nonelist:last-child .anchor .title:after {
left: calc(-50% + 10px);
}
.anchor-nav ul li.nonelist .anchor {
color: #757675;
}
.anchor-nav .nonelist.active:last-child .anchor .title:before,
.anchor-nav .nonelist.active:last-child .anchor .title:after {
background: #757675 !important;
}
.anchor-nav ul li.nonelist .title .circle:after {
background: #757675 !important;
width: 8px;
height: 8px;
}
.anchor-nav ul li.active.nonelist .title .circle:after {
background: #757675 !important;
}
.anchor-nav ul li.active~li.nonelist .anchor {
color: rgb(0 0 0 / 43%);
}
.anchor-nav ul li.active~li.nonelist .anchor .title .circle:after {
background: #d1d1d1 !important;
}
}
<!DOCTYPE HTML>
<html lang="tr">
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css"
/>
</head>
<body>
<header class="header">
<div class="anchor-nav">
<ul class="anchor-list">
<li class="active item">
<a href="#section1" class="anchor">
<h3 class="title">
<em>
<strong> Uzun Süren </strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section2" class="anchor">
<h3 class="title">
<em>
<strong> Sultan Melikşah</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section3" class="anchor">
<h3 class="title">
<em>
<strong>Oğlu Mahmud Hayat Felsefesi</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section4" class="anchor">
<h3 class="title">
<em>
<strong>Bunun Üzerine</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section5" class="anchor">
<h3 class="title">
<em>
<strong>Adalet</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="nonelist item">
<a href="#section6" class="anchor">
<h3 class="title">
<em>
<strong>Test</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="nonelist item">
<a href="#section7" class="anchor">
<h3 class="title">
<em>
<strong>Öneri </strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
</ul>
</div>
</header>
<main class="mainContent">
<div class="swiper main-slider wrapper">
<div class="swiper-wrapper">
<section class="swiper-slide section-part" id="slide1">
slide 1
</section>
<section class="swiper-slide section-part" id="slide2">
slide 2
</section>
<section class="swiper-slide section-part" id="slide3">
slide 3
</section>
<section class="swiper-slide section-part" id="slide4">
slide 4
</section>
<section class="swiper-slide section-part" id="slide5">
slide 5
</section>
<section class="swiper-slide section-part" id="slide6">
slide 6
</section>
<section class="swiper-slide section-part" id="slide7">
slide 7
</section>
</div>
<div class="swiper-button-prev d-none d-md-flex">
<button class="d-flex align-items-center justify-content-center" id="previous">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_94_1561)">
<path d="M20.25 12L3.75 12" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 18.75L3.75 12L10.5 5.25" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_94_1561">
<rect width="24" height="24" fill="white" transform="translate(24 24) rotate(-180)"/>
</clipPath>
</defs>
</svg>
</button>
</div>
<div class="swiper-button-next d-none d-md-flex">
<button class="d-flex align-items-center justify-content-center" id="next">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_103_2624)">
<path d="M3.75 12H20.25" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.5 5.25L20.25 12L13.5 18.75" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_103_2624">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
</div>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
</body>
</html>
You need to add a click eventListener for these anchor links calling the
swiper.slideTo(index, speed, runCallbacks) method as described in the swiper API docs
//add event listeners navigation
let anchors = document.querySelectorAll('.anchor');
anchors.forEach(function(anchor, i){
anchor.addEventListener('click', function(e){
//go to slide
swiper2.slideTo(i)
})
})
Keep in mind: In JavaScript, indices always start with 0.
So you first slide would be opened via:
swiper2.slideTo(0)
var init = false;
function swiperCard() {
if (!init) {
init = true;
swiper2 = new Swiper(".main-slider", {
loop: false,
spaceBetween: 0,
speed: 1500,
slidesPerView: 1,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
mousewheel: {
sensitivity: 1,
releaseOnEdges: true
}
});
//add event listeners navigation
let anchors = document.querySelectorAll(".anchor");
anchors.forEach(function (anchor, i) {
anchor.addEventListener("click", function (e) {
//go to slide
swiper2.slideTo(i);
});
});
}
}
swiperCard();
window.addEventListener("resize", swiperCard);
.anchor-nav {
width: 100%;
position: relative;
height: 60px;
padding-left: 10px;
}
.anchor-nav .anchor {
font-size: 16px;
position: relative;
text-align: left;
font-family: var(--bs-site-main-font-bold);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title {
padding-bottom: 10px;
position: relative;
width: 100%;
text-align: left;
position: relative;
}
.anchor-nav ul li.active .anchor {
color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title .circle {
width: 28px;
height: 20px;
display: block;
position: absolute;
background: var(--bs-white);
color: #d1d1d1;
bottom: -8px;
}
.anchor-nav .anchor .title .circle:after {
content: "";
position: absolute;
left: 50%;
right: auto;
top: 50%;
width: 8px;
height: 8px;
background: aliceblue;
border-radius: 100%;
transform: translate(-50%, -50%);
}
.anchor-nav .anchor.active .circle:after {
background: var(--bs-site-red-color);
}
#previous,
#next {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
width: 40px;
height: 40px;
background: var(--bs-white);
border-radius: var(--bs-site-radius);
transition: var(--bs-site-transition);
flex: 0 0 40px;
max-width: 40px;
}
#previous:hover svg path,
#next:hover svg path {
stroke: var(--bs-white);
}
#previous:hover,
#next:hover {
background: var(--bs-site-red-color);
}
#previous svg path,
#next svg path {
transition: var(--bs-site-transition);
}
.anchor-nav ul::-webkit-scrollbar {
display: none;
}
.anchor-nav ul li {
flex-shrink: 0;
width: 40%;
}
.progress-bar .swiper-pagination.swiper-pagination-progressbar {
background: rgb(25 26 25 / 20%);
height: 2.5px;
}
.progress-bar .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--bs-site-red-color);
top: 0px;
}
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev {
height: auto;
margin: 0;
width: auto;
transform: translate(0, -50%);
}
.main-slider .swiper-button-next:after,
.main-slider .swiper-button-prev:after {
display: none;
}
.anchor-nav .anchor-list {
justify-content: space-between;
overflow-x: auto;
overflow-y: hidden;
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.anchor-nav ul li.active .anchor .title .circle:after {
background: var(--bs-site-red-color);
}
.queries-block.part-area {
height: calc(100% - 60px);
overflow-y: auto;
padding: 0;
margin: 0;
flex-flow: inherit;
flex-direction: column;
vertical-align: top;
justify-content: start;
}
.main-slider .swiper-wrapper {
display: block;
}
.anchor-nav .anchor.active .title {
border-color: var(--bs-site-red-color);
}
.anchor-nav .anchor .title em {
padding-right: 10px;
width: 100%;
display: block;
position: relative;
}
.anchor-nav .anchor .title em strong {
max-height: 30px;
overflow: hidden;
display: block;
}
.anchor-nav ul li.active .anchor .title .circle:after,
.anchor-nav .swiper-initialized .swiper-slide.active .anchor .title .circle:after {
background: url(../i/play-1.svg) no-repeat !important;
width: 18px;
height: 20px;
}
#media (min-width: 768px) {
.wrapper .section-part:last-child {
min-width: auto;
flex-shrink: 0;
width: 682px;
}
.main-slider .swiper-wrapper {
display: block;
}
.wrapper .section-part {
height: calc(100vh - 134px);
position: relative;
min-width: 100vw;
flex-shrink: 0;
overflow: hidden;
}
.wrapper .section-part>.container,
.wrapper .section-part>.container-fluid,
.wrapper .section-part>.container>.row,
.wrapper .section-part>.container-fluid>.row,
.wrapper .section-part>.container>.row>div,
.wrapper .section-part>.container-fluid>.row>div {
height: 100%;
}
.p-container {
max-height: 100%;
}
.main-slider .swiper-wrapper {
display: flex;
}
.anchor-nav ul li {
flex-shrink: 1;
width: 100%;
list-style-type: none;
}
.anchor-nav .anchor .title {
text-align: center;
/* border-bottom: 2px solid var(--bs-site-red-color); */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.anchor-nav .anchor .title .circle {
transform: inherit;
left: 50%;
transform: translate(-50%, 0);
}
.anchor-nav .anchor {
font-size: 12px;
}
.anchor-nav {
padding: 0;
}
.part-head {
padding-top: 0;
}
.anchor-nav ul li.active~li .anchor {
color: rgb(25 26 25 / 30%);
}
.anchor-nav ul li.active~li .anchor .title:before {
background: #d1d1d1;
width: 0;
}
.anchor-nav .anchor .title:before {
content: "";
position: absolute;
bottom: 15px;
left: 0;
height: 2px;
width: 100%;
transition: all 0.25s ease;
background: var(--bs-site-red-color);
}
.anchor-nav .anchor .title:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 15px;
height: 2px;
background: #d1d1d1;
z-index: -1;
}
.anchor-nav ul li:first-child .anchor .title:after {
left: 40%;
}
.anchor-nav ul li:first-child .anchor .title:before {
left: 40%;
width: 60%;
}
.anchor-nav ul li.active .anchor em:before {
content: "";
position: absolute;
left: 45%;
bottom: -5px;
height: 2px;
background: #d1d1d1 !important;
width: 55%;
}
.anchor-nav ul li .anchor .title .circle:after {
background: var(--bs-site-red-color);
}
.anchor-nav ul li.active~li .anchor .circle:after {
background: #d1d1d1;
}
.anchor-nav .anchor .title em {
height: 40px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
line-height: 15px;
}
.anchor-nav .anchor .title .circle {
bottom: 6px;
}
.anchor-nav ul li.nonelist:last-child .anchor .title:after,
.anchor-nav ul li.nonelist:last-child .anchor .title:before {
width: 50%;
background: #d1d1d1 !important;
}
.anchor-nav ul li:last-child .anchor .title em:before {
display: none;
}
.anchor-nav ul li.nonelist:last-child .anchor .title:after {
left: calc(-50% + 10px);
}
.anchor-nav ul li.anchor.nonelist .title {
color: #5a5a5a;
}
.nonelist.active:last-child .anchor .title:before,
.anchor-nav .nonelist.active .anchor .title:after {
background: #5a5a5a !important;
}
.anchor-nav ul li.nonelist.title .circle:after {
background: #5a5a5a !important;
width: 8px;
height: 8px;
}
.anchor-nav ul li.active~li.nonelist:last-child .anchor .title:after {
left: calc(-50% + 10px);
}
.anchor-nav ul li.nonelist .anchor {
color: #757675;
}
.anchor-nav .nonelist.active:last-child .anchor .title:before,
.anchor-nav .nonelist.active:last-child .anchor .title:after {
background: #757675 !important;
}
.anchor-nav ul li.nonelist .title .circle:after {
background: #757675 !important;
width: 8px;
height: 8px;
}
.anchor-nav ul li.active.nonelist .title .circle:after {
background: #757675 !important;
}
.anchor-nav ul li.active~li.nonelist .anchor {
color: rgb(0 0 0 / 43%);
}
.anchor-nav ul li.active~li.nonelist .anchor .title .circle:after {
background: #d1d1d1 !important;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" />
<header class="header">
<div class="anchor-nav">
<ul class="anchor-list">
<li class="active item">
<a href="#section1" class="anchor">
<h3 class="title">
<em>
<strong> Uzun Süren </strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section2" class="anchor">
<h3 class="title">
<em>
<strong> Sultan Melikşah</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section3" class="anchor">
<h3 class="title">
<em>
<strong>Oğlu Mahmud Hayat Felsefesi</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section4" class="anchor">
<h3 class="title">
<em>
<strong>Bunun Üzerine</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="item">
<a href="#section5" class="anchor">
<h3 class="title">
<em>
<strong>Adalet</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="nonelist item">
<a href="#section6" class="anchor">
<h3 class="title">
<em>
<strong>Test</strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
<li class="nonelist item">
<a href="#section7" class="anchor">
<h3 class="title">
<em>
<strong>Öneri </strong>
</em>
<span class="circle d-flex align-items-center justify-content-center"></span>
</h3>
</a>
</li>
</ul>
</div>
</header>
<main class="mainContent">
<div class="swiper main-slider wrapper">
<div class="swiper-wrapper">
<section class="swiper-slide section-part" id="slide1">
slide 1
</section>
<section class="swiper-slide section-part" id="slide2">
slide 2
</section>
<section class="swiper-slide section-part" id="slide3">
slide 3
</section>
<section class="swiper-slide section-part" id="slide4">
slide 4
</section>
<section class="swiper-slide section-part" id="slide5">
slide 5
</section>
<section class="swiper-slide section-part" id="slide6">
slide 6
</section>
<section class="swiper-slide section-part" id="slide7">
slide 7
</section>
</div>
<div class="swiper-button-prev d-none d-md-flex">
<button class="d-flex align-items-center justify-content-center" id="previous">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_94_1561)">
<path d="M20.25 12L3.75 12" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10.5 18.75L3.75 12L10.5 5.25" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_94_1561">
<rect width="24" height="24" fill="white" transform="translate(24 24) rotate(-180)" />
</clipPath>
</defs>
</svg>
</button>
</div>
<div class="swiper-button-next d-none d-md-flex">
<button class="d-flex align-items-center justify-content-center" id="next">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_103_2624)">
<path d="M3.75 12H20.25" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.5 5.25L20.25 12L13.5 18.75" stroke="#D62631" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_103_2624">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</button>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
I'm attempting to make this hover text overlay responsive on almost all devices, at least on regular screens "small, medium, and large," but I'm failing. Is this due to position absolute? I tried media queries, and they only worked on 40% of the screens, not all of them. Is there a way to avoid using media queries? I'm new to coding, so please forgive me if my question is silly.
.clients {
position: relative;
padding: 0px;
padding-left: 7px;
padding-right: 7px;
}
.client-container {
position: relative;
width: 100%;
overflow: hidden;
}
.client-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 0;
visibility: hidden;
z-index: 0;
}
.client-container:hover::after {
opacity: 1;
visibility: visible;
transition: opacity 350ms;
}
.product-desc {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: left;
align-items: center;
color: #fff;
text-align: left;
padding: 10em 1.39em 0.2em;
-webkit-transform: translateY(101%);
transform: translateY(101%);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
z-index: 1;
text-transform: uppercase;
font-size: 11px;
font-family: 'Inter', sans-serif;
font-weight: 200;
letter-spacing: 1.64px;
}
.client-container:hover .product-desc {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.product-desc2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: left;
align-items: center;
color: #fff;
text-align: right;
padding: 6.5em 0.389em 0.2em;
-webkit-transform: translateY(101%);
transform: translateY(101%);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
z-index: 1;
text-transform: capitalize;
font-size: 21px;
font-family: 'Inter', sans-serif;
font-weight:bold;
letter-spacing: 0.5px;
margin-left: 6.5px;
}
.client-container:hover .product-desc2 {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.brand-img {
display: block;
max-width: 100%;
height: auto;
transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-webkit-transition: all 1.6s ease;
-moz-transition: all 1.2s ease;
-o-transition: all 1.2s ease;
transition: all 1.2s ease;
}
.clients:hover .brand-img {
cursor: pointer;
transform: scale(1.6);
-ms-transform: scale(1.6);
-moz-transform: scale(1.6);
-webkit-transform: scale(1.3);
-o-transform: scale(1.6);
}
#media only screen and (max-device-width : 1440px){
.product-desc {
padding: 23em 0.60em 0.2em;
font-size: 11px;
font-family: 'Inter', sans-serif;
font-weight:200;
margin-left: 4px;
}
.product-desc2 {
padding: 14.5em 0.60em 0.2em;
font-size: 21px;
font-family: 'Inter', sans-serif;
font-weight: bold;
margin-left: -1px;
}
}
#media only screen and (max-device-width : 1440px){
.product-desc {
padding: 23em 0.60em 0.2em;
font-size: 11px;
font-family: 'Inter', sans-serif;
font-weight:200;
margin-left: 4px;
}
.product-desc2 {
padding: 14.5em 0.60em 0.2em;
font-size: 21px;
font-family: 'Inter', sans-serif;
font-weight: bold;
margin-left: -1px;
}
}
#media only screen and (min-device-width: 834px) and (max-device-width: 1112px) {
.product-desc {
padding: 24em 0.60em 0.2em;
font-size: 8px;
font-family: 'Inter', sans-serif;
font-weight:200;
margin-left: 1px;
}
.product-desc2 {
padding: 18.1em 0.60em 0.2em;
font-size: 13px;
font-family: 'Inter', sans-serif;
font-weight: bold;
margin-left: -2px;
}
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1023px) {
.product-desc {
padding: 27em 0.60em 0.2em;
font-size: 7px;
font-family: 'Inter', sans-serif;
font-weight:200;
margin-left: 1px;
}
.product-desc2 {
padding: 17.5em 0.60em 0.2em;
font-size: 13px;
font-family: 'Inter', sans-serif;
font-weight: bold;
margin-left: -2px;
}
}
#media only screen and (max-width : 600px) {
#work .product-desc {
display: none;
}
#work .product-desc2 {
padding:15em 0.40em 0.2em;
font-size: 10px;
font-family: 'Inter', sans-serif;
font-weight: bold;
}
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container text-center">
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>text1</P>
</div>
<div class="product-desc2">
<p>text2</p>
</div>
</figure>
</a>
</div>
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>text1</P>
</div>
<div class="product-desc2">
<p>text2</p>
</div>
</figure>
</a>
</div>
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>text1</P>
</div>
<div class="product-desc2">
<p>text2</p>
</div>
</figure>
</a>
</div>
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>text1</P>
</div>
<div class="product-desc2">
<p>text2</p>
</div>
</figure>
</a>
</div>
</div>
</body>
There is no need for padding because you have top bottom left right in your css just give percentages also you are using bootstrap 5 which means no need for media query in your case you are using it on mobile screens to hide the class also just to let you know in botstrap 5 you can hide classes by using Display property
.clients {
position: relative;
padding: 0px;
padding-left: 7px;
padding-right: 7px;
}
.client-container {
position: relative;
width: 100%;
overflow: hidden;
}
.client-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 0;
visibility: hidden;
z-index: 0;
}
.client-container:hover::after {
opacity: 1;
visibility: visible;
transition: opacity 350ms;
}
.product-desc {
position: absolute;
top: 70%;
right: 0;
bottom: 0;
left: 5%;
display: flex;
justify-content: left;
align-items: center;
color: #fff;
text-align: left;
-webkit-transform: translateY(101%);
transform: translateY(101%);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
z-index: 1;
text-transform: uppercase;
font-size: 11px;
font-family: 'Inter', sans-serif;
font-weight: 200;
letter-spacing: 1.64px;
}
.client-container:hover .product-desc {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.product-desc2 {
position: absolute;
top: 89%;
right: 0;
bottom: -5%;
left: 3%;
display: flex;
justify-content: left;
align-items: center;
color: #fff;
text-align: right;
-webkit-transform: translateY(101%);
transform: translateY(101%);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
z-index: 1;
text-transform: capitalize;
font-size: 21px;
font-family: 'Inter', sans-serif;
font-weight:bold;
letter-spacing: 0.5px;
margin-left: 6.5px;
}
.client-container:hover .product-desc2 {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.brand-img {
display: block;
max-width: 100%;
height: auto;
transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-webkit-transition: all 1.6s ease;
-moz-transition: all 1.2s ease;
-o-transition: all 1.2s ease;
transition: all 1.2s ease;
}
.clients:hover .brand-img {
cursor: pointer;
transform: scale(1.6);
-ms-transform: scale(1.6);
-moz-transform: scale(1.6);
-webkit-transform: scale(1.3);
-o-transform: scale(1.6);
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container text-center">
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>Lorem Ipsum is simply dummy text</P>
</div>
<div class="product-desc2">
<p>Lorem Ipsum</p>
</div>
</figure>
</a>
</div>
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>Lorem Ipsum is simply dummy text of the printing </P>
</div>
<div class="product-desc2">
<p>Lorem Ipsum</p>
</div>
</figure>
</a>
</div>
</figure>
</a>
</div>
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>Lorem Ipsum is simply dummy text of the printing </P>
</div>
<div class="product-desc2">
<p>Lorem Ipsum</p>
</div>
</figure>
</a>
</div>
</figure>
</a>
</div>
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>Lorem Ipsum is simply dummy text of the printing </P>
</div>
<div class="product-desc2">
<p>Lorem Ipsum</p>
</div>
</figure>
</a>
</div>
</figure>
</a>
</div>
</div>
</body>
I'm looking for a VueJS Card Component that mimic's this Example:
http://jsfiddle.net/NuWna/2/
Having a hard time writing the jQuery code in VueJS
$(document).ready(function(){
$(".slide").hover(function(){
$(this).find("div.snipit").slideDown("slow");
},function(){
$(this).find("div.snipit").slideUp("slow");
});
});
You can create a Vue component and you can use jQuery slideUp/slideDown methods on mounted vue lifecycle hooks,
Also I've given solution without jQuery below.
1. Using Vue + jQuery - http://jsfiddle.net/79rc5oss/1/
Vue.component('my-comp', {
template: `
<div class="slide">
<img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
<div class="snipit">
<h4>Image 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
`,
mounted: function(){
$(".slide").hover(function(){
$(this).find("div.snipit").slideDown("slow");
},function(){
$(this).find("div.snipit").slideUp("slow");
});
}
})
var app = new Vue({
el: '#app'
});
img{
border:1px solid yellow;
margin: 14px 0 0 0;
}
div.slide {
width: 310px;
height: 230px;
float: left;
border:1px solid red;
text-align: center;
position: relative;
background: url(http://dummyimage.com/310x230) no-repeat top center;
}
div.slide div {
width: 250px;
height: 100px;
padding: 0;
display: none;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
border:1px solid red;
bottom: 14px;
left:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
<my-comp></my-comp>
</div>
2. Using Vue + CSS without jQuery - http://jsfiddle.net/79rc5oss/
Vue.component('my-comp', {
template: `
<div class="slide">
<img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
<div class="snipit">
<h4>Image 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
`
})
var app = new Vue({
el: '#app'
});
img{
border:1px solid yellow;
margin: 14px 0 0 0;
}
div.slide {
width: 310px;
height: 230px;
float: left;
border:1px solid red;
text-align: center;
position: relative;
background: url(http://dummyimage.com/310x230) no-repeat top center;
overflow: hidden;
}
.slide div.snipit{
width: 250px;
height: 0px;
padding: 0;
display: block;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
border:1px solid red;
bottom: 12px;
left:30px;
overflow: hidden;
transition: all .5s ease-out;
}
.slide:hover div.snipit{
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
<my-comp></my-comp>
</div>
Compare how my flexbox looks in chrome or firefox and how it looks in safari. Chrome & Firefox are correct.
In Safari, It's acting like the minimum height of the flex box is calculated based on the bottom position of the last flex item, whereas in other browsers it seems to calculate the minimum height of the flex box based upon any flex item which takes it over the minimum.
Can anybody find out if my code is wrong or confirm that this is a bug?
View snippet in full page to see.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.wrapper {
margin: 0 auto;
max-width: 984px;
}
.container {
margin: 0 80px;
padding: 30px 0;
}
h1 {
margin: 0;
}
.top {
position: relative;
display: flex;
flex-direction: column;
max-height: 800px;
flex-wrap: wrap;
}
.prod-header {
order: 3;
width: 49%;
padding-left: 30px;
}
.prod-header img {
width: 100%;
}
.my-slider {
order: 1;
width: 51%;
padding-right: 30px;
}
.my-slider img {
width: 100%;
}
.prod-info {
order: 4;
width: 49%;
padding-left: 30px;
}
.prod-video {
order: 2;
width: 51%;
padding-right: 30px;
}
.prod-video iframe {
width: 100%;
}
.prod-review {
position: absolute;
bottom: 0;
right: 0;
order: 5;
padding-left: 30px;
width: 49%;
}
.prod-review img {
width: 100%;
}
<div class="wrapper">
<div class="container">
<div class="top flex">
<header class="prod-header">
<h1><img src="http://placehold.it/608x300"></h1>
<p>Family trivia game</p>
</header>
<div class="my-slider">
<img src="http://placehold.it/608x675">
</div>
<div class="prod-info">
<p>Lorem ipsum Occaecat qui proident aute id voluptate velit nulla anim incididunt.</p>
<p>Lorem ipsum Velit sint dolore dolor irure ullamco eu. Lorem ipsum Aute irure velit ad in sunt Duis sint veniam minim in labore voluptate. Lorem ipsum Laborum dolore eiusmod Ut deserunt occaecat aliquip amet do esse quis tempor et.</p>
</div>
<div class="prod-video">
<div class="videoWrapper">
<iframe width="420" height="315" src="https://www.youtube.com/embed/KqtvA6xo4DE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="prod-review">
<img src="http://placehold.it/608x375">
<a class="button" href="#">Buy now</a>
</div>
</div>
</div>
</div>
It looks like this is indeed a Safari-specific Bug.
I'm having an issue with my jumbotron not scaling properly when i'm trying to test my website. My height changes every time I adjust the size of the browser, which cause it to show the white space. Is there a way to set the height for the jumbotron without showing the white space?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Mobile Specific Metas
================================================== -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>The Portfolio of Jason Murray</title>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font awesome css file-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Default Theme css file -->
<link id="orginal" href="css/default-theme.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Google fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--=========== HEADER SECTION ================-->
<header id="header">
<!-- BEGIN MENU -->
<div class="menu_area">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<a class="navbar-brand" href="index.html">Jason<span>Murray</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div><!-- END MENU -->
</header>
<!--=========== END HEADER SECTION ================-->
<!--=========== MAIN CONTENT SECTION ================-->
<div class="jumbotron">
<div class="container">
<div class="image_opacity"></div>
<div class="caption">
<h2>Front-End</h2>
<h2>Web Developer</h2>
<p>Hi, I'm Jason Murray and I have a passion for building simplistic websites.</p>
Recent Work
</div>
</div>
</div>
<!--=========== END MAIN CONTENT SECTION ================-->
<!--=========== FOOTER SECTION================-->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="footer_left">
<p>© 2015 Jason Murray Web Design. All Rights Reserved</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="footer_right">
<ul class="social_nav">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!--=========== END FOOTER SECTION================-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
body,html{
overflow-x:hidden;
}
html{
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
overflow-x: hidden !important;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
a{
text-decoration: none;
color: #2f2f2f;
}
a:focus{
outline: none;
text-decoration: none;
}
h1,h2{
font-family: 'Montserrat', sans-serif;
}
h3,h4,h5,h6{
font-family: 'Varela', sans-serif;
}
h2 {
color: #313338;
font-size: 72px;
font-weight: 700;
line-height: 57px;
margin: 0;
padding-bottom: 10px;
text-transform: uppercase;
}
img{
border:none;
}
/*--------------------*/
/* HEADER */
/*--------------------*/
#header{
float: left;
display: inline;
width: 100%;
position: relative;
}
/*--------.menu_area-------- */
.menu_area{
position: absolute;
left:0;
right: 0;
top: 0;
}
.navbar-default {
background-color: #000000;
border-color: transparent;
padding: 12px 0px;
}
.past-main {
background-color: rgba(0,0,0,0.8);
margin-top: 0px;
padding:6px 0px;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
#navbar{overflow-x: hidden;}
.navbar-brand {
color: #fff !important;
font-size: 20px;
font-weight: bolder;
font-family: 'Varela', sans-serif;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a:hover{
text-transform: uppercase;
color: #2da2c8;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: transparent;
color: #2da2c8;
}
.navbar-brand > span {
color: #2da2c8;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #2da2c8;
}
/*---------------------*/
/* MAIN CONTENT - HOME */
/*---------------------*/
.jumbotron {
background: url("../img/lucho-49.jpg") no-repeat center center;
-webkit-background-size: 100% 100%
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
margin-top: 75px;
height: 305px;
}
.image_opacity{
background: none repeat scroll 0 0 #242434;
margin-top: 75px;
opacity: 0.8;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 305px;
z-index: 9;
}
.caption {
margin-top: 17%;
padding: 5px 0;
position: relative;
text-align: center;
z-index: 999;
}
.caption > h2 {
color: #ffffff;
font-size: 18px;
font-weight: 700;
line-height: 12px;
margin: 0 auto 10px;
padding-bottom: 8px;
text-align: center;
text-transform: uppercase;
width: 90%;
}
.caption>p{
color: #ffffff;
font-size: 12px;
}
.caption_btn{
padding: 10px 15px;
border: 2px solid #fff;
color: #fff;
font-size: 12px;
display: inline-block;
text-transform: uppercase;
}
.caption_btn:hover,.caption_btn:focus{
border-color:#2da2c8;
color: #2da2c8;
text-decoration: none;
}
/*----------------------*/
/* MAIN CONTENT - ABOUT */
/*----------------------*/
#about {
display: inline;
float: left;
width: 100%;
padding: 80px 0px;
}
.about_area{
float: left;
display: inline;
margin-bottom: 140px;
width: 100%;
min-height: 200px;
}
.heading{
float: left;
display: inline;
width: 100%;
}
.heading h2 {
display: inline-block;
margin-bottom: 35px;
margin-top: 65px;
padding-bottom: 15px;
padding-right: 50px;
font-size: 40px;
line-height: 40px;
}
.heading p{
font-size: 16px;
line-height: 28px;
font-weight: 300;
}
.about_content{
float: left;
display: inline;
width: 100%;
padding: 50px 0px;
}
.about_featured{
float: left;
display: inline;
width: 100%;
}
.panel-group .panel {
border-radius: 0;
margin-bottom: 0px;
box-shadow: none;
}
.panel-group .panel + .panel {
margin-top: 0;
}
.panel-default {
border-color: transparent;
}
.panel-default > .panel-heading {
background-color: transparent;
color: #333;
border: 0 none !important;
padding: 5px 15px;
}
.panel-title {
border-bottom: 1px solid #ccc;
color: #222;
font-family: 'Varela', sans-serif;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.panel-title a {
display: block;
text-decoration: none;
padding-bottom: 10px;
}
.panel-default .in{
padding-left:10px;
margin-left: 20px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.panel-title a span{
margin-right: 5px;
}
.panel-body {
border-top-color: transparent !important;
padding: 0px 15px;
margin: 10px 0px;
}
.about_slider{
float: left;
display: inline;
width: 100%;
height: 350px;
}
.single_iteam{
float: left;
display: inline;
width: 100%;
height:100%;
}
.single_iteam img {
max-width: 100%;
}
.about_slider .slick-dots li button:before {
content: "•";
font-size: 28px;
}
.about_slider .slick-dots li.slick-active button:before {
opacity: 0.75;
}
.skills_area{
background-color: #fff
float: left;
display: inline;
width: 100%;
min-height: 350px;
padding: 85px 0px;
position: relative;
}
.skills{
position: relative;
z-index: 999;
}
.heading h3 {
color: #000;
display: inline-block;
float: left;
font-size: 40px;
margin: 0 0 40px;
padding-bottom: 10px;
text-transform: uppercase;
font-weight: bold;
line-height: 40px;
}
div[data-dimension] {
float: none;
margin: 0 auto;
}
.circle-text{
color: #000;
}
.single_skill{
float: left;
display: block;
width: 100%;
text-align: center;
}
.single_skill > h4 {
color: #000000;
font-size: 20px;
font-weight: bold;
}
/*--------------------------*/
/* MAIN CONTENT - PORTFOLIO */
/*--------------------------*/
/*------------------------*/
/* MAIN CONTENT - CONTACT */
/*------------------------*/
/*--------------------*/
/* FOOTER */
/*--------------------*/
#footer{
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: #000;
}
.footer_left{
float: left;
display: inline;
width: 100%;
}
.footer_left > p {
font-size: 12px;
text-align: center;
color: #ffffff;
margin-bottom: 5px;
margin-top: 5px;
}
.footer_left > p a {
font-weight: bold;
}
.footer_right{
float: left;
display: inline;
width: 100%;
}
.social_nav{
text-align: center;
}
.social_nav li{
display: inline-block;
}
.social_nav li a {
border: 1px solid #fff;
color: #ffffff;
display: inline-block;
font-size: 18px;
height: 30px;
margin-left: 5px;
text-align: center;
width: 35px;
line-height: 28px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.social_nav li a:hover{
color: #2da2c8;
border-color: #2da2c8;
}
/*----------------------------------*/
/* RESPONSIVE STYLE - MEDIA QUERIES */
/*----------------------------------*/
/* Landscape phones and portrait tablets */
#media(min-width: 481px) and (max-width: 767px) {
.navbar-brand {color: #fff !important;font-size: 26px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 12px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 592px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 592px;opacity: 0.8;width: 100%;}
.caption {margin-top: 40%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 25px;font-weight: 700;line-height: 20px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 14px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 14px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 24px;}
#footer > .container > .row {margin-right: auto;}
.footer_left > p {font-size: 12px;text-align: center;}
.social_nav{text-align: center;}
}
/* Portrait tablets and small desktops */
#media(min-width: 768px) and (max-width: 991px) {
.navbar-brand {color: #fff !important;font-size: 30px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 13px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 816px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 816px;opacity: 0.8;width: 100%;}
.caption {margin-top: 28%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 45px;font-weight: 700;line-height: 56px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 18px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 18px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
#footer > .container {margin-left:-15px;margin-right:-15px;}
.footer_left > p {font-size: 13px;text-align: left;}
#footer .row {margin-left: -26px;}
.social_nav{text-align: right;margin-right: 12px;}
}
/* Landscape tablets and medium desktops */
#media (min-width: 992px) and (max-width: 1199px) {
.navbar-brand {color: #fff !important;font-size: 33px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.container > .navbar-header {margin-left:8px;}
.navbar-default .navbar-nav > li > a {font-size: 14px;}
.navbar-right {margin-right:0px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 1024px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 1024px;opacity: 0.8;width: 100%;}
.caption {margin-top: 32%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 55px;font-weight: 700;line-height: 66px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 19px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 18px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
#footer > .container {margin-left:-15px;margin-right:-15px;}
.footer_left > p {font-size: 14px;text-align: left;}
.social_nav{text-align: right;margin-right: 18px;}
}
/* Large desktops and laptops */
#media(min-width: 1200px) {
.navbar-brand {color: #fff !important;font-size: 35px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 15px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 740px;}
.image_opacity {background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 740px;opacity: 0.8;width: 100%;}
.caption {margin-top: 10%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 65px;font-weight: 700;line-height: 76px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption > p {color: #ffffff;font-size: 20px;}
.caption_btn {padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 20px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
.footer_left > p {font-size: 15px;text-align: left;}
.social_nav{text-align: right;}
}
I'd go for a different approach. The problem is, you've got fixed heights on your jumbotron and your image_opacity. A far more easy approach is putting a faux-gradient on the jumbotron, like this:
.jumbotron {
background-image:
linear-gradient(rgba(249, 249, 249, 0.9), rgba(249, 249, 249, 0.9)),
url("../img/lucho-49.jpg") no-repeat center center;
background-size: 100% auto;
margin-top: 75px;
height: 400px;
position: relative;
}
And then you don't need the image_opacity. Oh and I didn't check this thoroughly, but -webkit-, -moz-, and -o-background-size are imho non-existent.
Edit 2: set the parent div and the jumbotron to a height of 100% (in this case, that's body):
html, body {
height: 100%;
}
.jumbotron {
background-image:
linear-gradient(rgba(249, 249, 249, 0.9), rgba(249, 249, 249, 0.9)),
url("../img/lucho-49.jpg") no-repeat center center;
background-size: 100% 100%;
margin-bottom: 0px;
height: 100%;
}
Bootply (in this example the page is wrapped in a #wrap element, so this has to be height:100%;, too.)
This should do the trick. Try to put !important after the properties if it's not working immediately.