We Keep Coding

jquery Image gallery with an overlay, can't get the correct url on click because of the overlay

im trying to make a flexbox image gallery popup onclick. Almost everything works, but I have trouble getting the url of the correct image. My code get the url only of the first image, no matter which image I click. Can someone help me and point out with what Im doing wrong?
Here is the code:
$(document).ready(function() {
$(".image-overlay").click(function() {
var url = $('.content img').attr('src');
$(".modal").css("display", "block");
$(".close").css("display", "block");
$('#img01').attr('src', url);
});
});
$(document).ready(function() {
$(".image-overlay").mouseover(function() {
$(this).css("opacity", "1");
});
$(".image-overlay").mouseout(function() {
$(this).css("opacity", "0");
});
});
$(document).ready(function() {
$(".close").click(function() {
$(".modal").css("display", "none");
});
});
.gallery {
box-sizing: border-box;
margin-top: 5%;
padding: 0 5%;
}
.gallery-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.gallery-column1 {
-ms-flex: 18%;
/* IE10 */
flex: 18%;
max-width: 18%;
padding: 0 0.8em;
}
.gallery-column2 {
-ms-flex: 24.7%;
/* IE10 */
flex: 24.7%;
max-width: 24.7%;
padding: 0 0.8em;
}
.gallery-column3 {
-ms-flex: 31.2%;
/* IE10 */
flex: 31.2%;
max-width: 31.2%;
padding: 0 0.8em;
}
#media screen and (max-width: 700px) {
.gallery-column1,
.gallery-column2,
.gallery-column3 {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.gallery-column1 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column2 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column3 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding: 1%;
/* Location of the box */
top: 20%;
width: 320px;
/* Full width */
height: auto;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
left: 50%;
transform: translate(-50%, 0);
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.8s;
animation-name: zoom;
animation-duration: 0.8s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
display: block;
position: absolute;
right: 5%;
top: -2%;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* Overlay 8*/
.content {
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.content .image-overlay {
background: rgba(114, 208, 223, 0.8);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 8%;
bottom: 0;
right: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery-container">
<div class="gallery-column1">
<div class="content img1">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon" aria-hidden="true"></i>
</div>
<img id="myImg" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery1.png">
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<div class="content img4">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon2" aria-hidden="true"></i>
</div>
<img id="myImg4" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery4.png">
</div>
</div>
<div class="gallery-column2">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon3" aria-hidden="true"></i>
</div>
<img id="myImg2" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery2.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon4" aria-hidden="true"></i>
</div>
<img id="myImg5" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery5.png">
</div>
</div>
<div class="gallery-column3">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon5" aria-hidden="true"></i>
</div>
<img id="myImg3" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery3.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon6" aria-hidden="true"></i>
</div>
<img id="myImg6" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery6.png">
</div>
</div>
</div>
</div>
or my codepen url: https://codepen.io/christmastrex/pen/mdVzXMd

Welcome Elka, your issue is in this line:
var url= $('.content img').attr('src');
Inside the event the keyword this refers to the current image-overlay. Said that, in order to find the image you need to select the next img object.
Hence your code will be:
var url= $(this).next('img').attr('src');
The snippet:
$(".image-overlay").click(function(){
var url= $(this).next('img').attr('src');
$(".modal").css("display","block");
$(".close").css("display","block");
$('#img01').attr('src', url);
});
$(".image-overlay").mouseover(function(){
$(this).css("opacity", "1");
});
$(".image-overlay").mouseout(function(){
$(this).css("opacity", "0");
});
$(".close").click(function(){
$(".modal").css("display", "none");
});
.gallery{
box-sizing: border-box;
margin-top:5%;
padding: 0 5%;
}
.gallery-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.gallery-column1 {
-ms-flex: 18%; /* IE10 */
flex: 18%;
max-width: 18%;
padding: 0 0.8em;
}
.gallery-column2 {
-ms-flex: 24.7%; /* IE10 */
flex: 24.7%;
max-width: 24.7%;
padding: 0 0.8em;
}
.gallery-column3 {
-ms-flex: 31.2%; /* IE10 */
flex: 31.2%;
max-width: 31.2%;
padding: 0 0.8em;
}
#media screen and (max-width: 700px) {
.gallery-column1, .gallery-column2, .gallery-column3 {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.gallery-column1 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column2 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column3 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 1%; /* Location of the box */
top: 20%;
width: 320px; /* Full width */
height: auto; /* Full height */
overflow: auto; /* Enable scroll if needed */
left: 50%;
transform: translate(-50%, 0);
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.8s;
animation-name: zoom;
animation-duration: 0.8s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
display:block;
position: absolute;
right: 5%;
top: -2%;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* Overlay 8*/
.content {
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.content .image-overlay {
background: rgba(114,208,223,0.8);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 8%;
bottom: 0;
right: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<div class="gallery-container">
<div class="gallery-column1">
<div class="content img1">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon" aria-hidden="true"></i>
</div>
<img id="myImg" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery1.png">
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<div class="content img4">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon2" aria-hidden="true"></i>
</div>
<img id="myImg4" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery4.png">
</div>
</div>
<div class="gallery-column2">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon3" aria-hidden="true"></i>
</div>
<img id="myImg2" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery2.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon4" aria-hidden="true"></i>
</div>
<img id="myImg5" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery5.png">
</div>
</div>
<div class="gallery-column3">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon5" aria-hidden="true"></i>
</div>
<img id="myImg3" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery3.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon6" aria-hidden="true"></i>
</div>
<img id="myImg6" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery6.png">
</div>
</div>
</div>
</div>

I've changed the following line in your js
var url= $('.content img').attr('src');
to
var url = $(this).siblings('img').attr('src');
So you get the image that is the sibling of the clicked .image-overlay
/*var myVar = document.querySelectorAll('.content img');
var mySrc="";
for (var i = 0; i < myVar.length; i++) {
mySrc = myVar[i].getAttribute('src');
//alert(mySrc);
}*/
$(document).ready(function() {
$(".image-overlay").click(function() {
var url = $(this).siblings('img').attr('src');
$(".modal").css("display", "block");
$(".close").css("display", "block");
$('#img01').attr('src', url);
});
});
$(document).ready(function() {
$(".image-overlay").mouseover(function() {
$(this).css("opacity", "1");
});
$(".image-overlay").mouseout(function() {
$(this).css("opacity", "0");
});
});
$(document).ready(function() {
$(".close").click(function() {
$(".modal").css("display", "none");
});
});
.gallery {
box-sizing: border-box;
margin-top: 5%;
padding: 0 5%;
}
.gallery-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.gallery-column1 {
-ms-flex: 18%;
/* IE10 */
flex: 18%;
max-width: 18%;
padding: 0 0.8em;
}
.gallery-column2 {
-ms-flex: 24.7%;
/* IE10 */
flex: 24.7%;
max-width: 24.7%;
padding: 0 0.8em;
}
.gallery-column3 {
-ms-flex: 31.2%;
/* IE10 */
flex: 31.2%;
max-width: 31.2%;
padding: 0 0.8em;
}
#media screen and (max-width: 700px) {
.gallery-column1,
.gallery-column2,
.gallery-column3 {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.gallery-column1 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column2 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column3 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding: 1%;
/* Location of the box */
top: 20%;
width: 320px;
/* Full width */
height: auto;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
left: 50%;
transform: translate(-50%, 0);
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.8s;
animation-name: zoom;
animation-duration: 0.8s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
display: block;
position: absolute;
right: 5%;
top: -2%;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* Overlay 8*/
.content {
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.content .image-overlay {
background: rgba(114, 208, 223, 0.8);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 8%;
bottom: 0;
right: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<div class="gallery-container">
<div class="gallery-column1">
<div class="content img1">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon" aria-hidden="true"></i>
</div>
<img id="myImg" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery1.png">
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<div class="content img4">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon2" aria-hidden="true"></i>
</div>
<img id="myImg4" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery4.png">
</div>
</div>
<div class="gallery-column2">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon3" aria-hidden="true"></i>
</div>
<img id="myImg2" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery2.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon4" aria-hidden="true"></i>
</div>
<img id="myImg5" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery5.png">
</div>
</div>
<div class="gallery-column3">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon5" aria-hidden="true"></i>
</div>
<img id="myImg3" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery3.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon6" aria-hidden="true"></i>
</div>
<img id="myImg6" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery6.png">
</div>
</div>
</div>
</div>

Load/replace an img or video specified in a data-src

My aim is to display a different image or video displayed within a div, which changes when other elements are hovered over.
I think I have this working with just an image by checking what image file is specified in a data-src and loading that into an img tag on the page. However I need to change the markup from img to video when a movie file is specifed - that's what I need help with.
You can see the 'working' image version here (not the 3rd item has a placeholder video in the data-src so won't show):
https://codepen.io/moy/pen/BaNxzdL
So currently on the page I have this empty image tag:
<div class="carousel__bg">
<img src="" />
</div>
Image files are specified on multiple carousel items in a data-src like the example below:
<div class="carousel__item" data-src="img/content/1-wide.jpg">
<div class="carousel__content">
<h4 class="carousel__title">Behind The Scenes</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Denim Cox in Fuck Yes Dude!</h2>
Read the Article
</div>
<img src="img/content/1.jpg" class="carousel__image" />
</div>
And the javascript that gets the image URL and adds it to the page is this:
$(function() {
var overlay = $('.carousel__bg img'), cached = {};
$('.carousel__item').mouseenter(function() {
var item = $(this),
spot = $(this).index('.carousel__item'),
value = item.attr('data-src');
overlay.fadeTo(0,0).attr('src', value);
if (!overlay[0].complete && !cached[spot]) {
cached[spot] = true;
$('.carousel__bg').addClass('loading');
overlay.one('load', function() {
$('.carousel__bg').removeClass('loading');
overlay.fadeTo(300,1);
});
}
else overlay.fadeTo(300,1);
})
.mouseleave(function() {
overlay.finish();
});
});
Obviously the problem is if I specify data-src="video/safari.mp4" it isn't going to work as it's currently trying to add the video into an img element. So how would I go about switching between img/video tags? A related issue would be to be able to load both an mp4 + webm/ogg versions of the file?
So would it need to be reworked to 'inject' an img or video element onto the page depending on the extension? I tried using an if/else statement to check if the data-src contained the .mp4 extension and just hardcoded a video element on the page to text but couldn't get that to work. :/
These files can be quite large which is why I'm not loading them until they're needed.
Edit
As a bit of an aside, I decided to put these items in a carousel to see if this effect would work - and it pretty much does!
However, I noticed the way that I fade out the images in the CSS (fade all of them out when the .carousel is hovered but then target the individual item and overwrite) is now a problem when you hover over the prev/next buttons as the images don't fade back in.
Anyone got a better way of handling this? I tried a 100% CSS method but maybe added a class would be better?
Slick carousel example: https://codepen.io/moy/pen/JjdvRyG

The video element part is not two hard, the important part is getting the mime type of the video to add to the source element.
The data-src takes an array of video urls (of different types) and adds the different sources to the element after finding the type.
I updated your codepen
As for the buttons, they are inside the .carousel element so the will bubble the hover to all the elements styled based on that. I made some elements more specific so they will only change style when the list of items is hovered.
Finally, in order for the listeners to apply to the slick element, I changed them to .on.
var VIDEO_TYPES = {
'mp4': 'video/mp4',
'webm': 'video/webm',
'ogv': 'video/ogg',
}
/**
* Slick
*/
$(document).ready(function() {
$('.slick-carousel').slick({
//centerMode: true,
centerPadding: '0',
slidesToShow: 3,
arrows: true,
dots: false,
prevArrow: '<a class="slick-arrow slick-arrow--prev"><span>←</span></a>',
nextArrow: '<a class="slick-arrow slick-arrow--next"><span>→</span></a>',
responsive: [{
breakpoint: 960,
settings: {
centerMode: true,
slidesToShow: 1
}
},
{
breakpoint: 600,
settings: {
centerMode: true,
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
centerMode: true,
slidesToShow: 1
}
}
]
})
.on('setPosition', function(event, slick) {
slick.$slider.find(".slick-slide .tile:not(.position-set)").addClass('position-set').css('height', slick.$slideTrack.height() - 30 + 'px');
});
/**
* Image Swap
*/
var cached = {};
var overlay_video = $(".carousel__bg video");
var overlay_img = $(".carousel__bg img");
var overlay = $(".carousel__bg");
$(".carousel__item")
.on('mouseenter', function() {
var item = $(this),
spot = $(this).index(".carousel__item"),
value = item.data("src");
overlay_video.empty();
var overlay_item;
overlay.fadeTo(0, 0);
//videos will have an array ur urls
var is_video = value instanceof Array;
if(is_video) {
overlay_item = overlay_video;
overlay_img.attr("src", '');
overlay_video.append(value.map((url) => {
var extension = url.split('.').pop();
var type = VIDEO_TYPES[extension];
return `<source src="${url}" type="${type}">`
}));
} else {
overlay_item = overlay_img;
overlay_img.attr("src", value);
}
//force the video element to reload
overlay_video.get(0).load();
if (!overlay_item.complete && !cached[spot]) {
cached[spot] = true;
overlay.addClass("loading");
overlay_item.one(is_video ? "loadeddata" : "load", function() {
overlay.removeClass("loading");
overlay.fadeTo(300, 1);
});
} else overlay.fadeTo(300, 1);
})
.on('mouseleave', function() {
overlay.finish();
});
});
/**
* Base styling.
*/
html {
background: rgb(255,255,255);
font-size: 62.5%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
}
body {
background-color: transparent;
color: rgb(0,0,0);
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.6rem;
margin: 0;
padding: 30px 0 0;
text-rendering: optimizeLegibility;
}
/**
* Carousel
*/
.carousel {
background: rgb(0,0,0);
color: rgb(255,255,255);
height: 640px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%;
max-width: 1200px;
}
.carousel:before,
.carousel:after {
background: rgba(255,255,255,.25);
content: "";
height: 100%;
position: absolute;
top: 0;
left: 33.33333%;
width: 1px;
z-index: 30;
}
.carousel:after {
left: 66.66666%;
}
/**
* Background (fullwidth) image
*/
.carousel__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
.carousel__bg.loading {
background: url(../img/interface/loading.gif) no-repeat center center;
}
.carousel__bg img, .carousel__bg video {
display: block;
height: 640px;
object-fit: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
}
/**
* Individual carousel item
*/
.carousel__item {
box-sizing: border-box;
float: left;
height: 640px;
position: relative;
width: 33.33333%;
}
.carousel__item:hover {
cursor: pointer;
}
/* Text Content */
.carousel__content {
background: rgba(0,0,0,.45);
box-sizing: border-box;
color: rgb(255,255,255);
height: 100%;
min-height: 100%;
padding: 30px;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 15;
}
.carousel__title,
.carousel__subtitle,
.carousel__flag {
color: rgb(255,255,255);
letter-spacing: 1px;
font-family: 'Anton', sans-serif;
font-weight: 400;
line-height: 1;
margin: 0 0 5px;
padding: 0;
text-transform: uppercase;
}
.carousel__title {
font-size: 20px;
transition: all .25s;
}
.carousel__subtitle {
display: none;
font-size: 48px;
}
.carousel__flag {
color: rgb(45,190,193);
font-size: 14px;
}
/* Button */
.carousel__btn {
background: transparent;
border: 1px solid rgb(255,255,255);
box-sizing: border-box;
color: rgb(255,255,255);
display: block;
font-family: 'Anton', sans-serif;
font-size: 12px;
font-weight: 400;
height: 45px;
line-height: 45px;
letter-spacing: 1px;
opacity: 0;
position: absolute;
padding: 0 30px;
bottom: 30px;
left: 30px;
right: 30px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all .15s;
-webkit-backface-visibility: hidden;
}
.carousel__btn:visited {
background: transparent;
}
.carousel__btn:focus,
.carousel__btn:hover {
background: rgb(45,190,193);
border-color: rgb(45,190,193);
}
/* Image */
.carousel__image {
display: block;
height: 100%;
opacity: 1;
object-fit: cover;
transition: all .30s;
position: relative;
width: 100%;
max-width: 100%;
-webkit-backface-visibility: hidden;
}
/* When hovering over the carousel, fade all the titles out */
.carousel>.slick-carousel>.slick-list:hover .carousel__title {
opacity: .30;
}
/* But not the one contained without the 'item' you're hovering over */
.carousel:hover .carousel__item:hover .carousel__title {
opacity: 1;
}
/* Fade all images out so the fullwidth background image is visble */
.carousel>.slick-carousel>.slick-list:hover .carousel__image {
opacity: 0;
}
/* Hide the flag element */
.carousel>.slick-carousel>.slick-list:hover .carousel__flag {
display: none;
}
/* Show the subtitle */
.carousel:hover .carousel__item:hover .carousel__subtitle {
display: block;
}
/* Display the CTA of the active item */
.carousel:hover .carousel__item:hover .carousel__btn {
opacity: 1;
}
/* Slick Prev/Next */
.slick-carousel,
.slick-list,
.slick-track {
height: 100%;
min-height: 100%;
}
.slick-arrow {
background: transparent;
border: 1px solid rgb(255,255,255);
color: rgb(255,255,255);
display: block;
font-family: 'Anton', sans-serif;
font-size: 24px;
height: 45px;
line-height: 45px;
margin-top: -30px;
overflow: hidden;
position: absolute;
top: 50%;
left: 30px;
text-align: center;
transform: rotate(45deg);
transition: all .15s;
width: 45px;
z-index: 60;
}
.slick-arrow:hover {
background: rgb(255,255,255);
color: rgb(0,0,0);
}
.slick-arrow span {
display: block;
transform: rotate(-45deg);
}
.slick-arrow--next {
left: auto;
right: 30px;
}
/* Slick Core */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="carousel">
<div class="carousel__bg">
<img src="" />
<video autoplay muted loop></video>
</div>
<div class="slick-carousel">
<div class="carousel__item" data-src="https://www.fillmurray.com/750/550">
<div class="carousel__content">
<h4 class="carousel__title">Behind The Scenes</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
Read the Article
</div>
<img src="https://www.fillmurray.com/g/400/600" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://www.fillmurray.com/800/600">
<div class="carousel__content">
<h4 class="carousel__title">Reed Stark</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
Watch the Video
</div>
<img src="https://www.fillmurray.com/g/450/650" class="carousel__image" />
</div>
<div class="carousel__item" data-src='[ "https://www.w3schools.com/tags/movie.mp4", "https://www.w3schools.com/tags/movie.ogg"]'>
<div class="carousel__content">
<h4 class="carousel__title">Fresh Drops</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
See The Collection
</div>
<img src="https://www.fillmurray.com/g/350/550" class="carousel__image" />
</div>
<div class="carousel__item" data-src='[ "https://www.w3schools.com/tags/movie.mp4", "https://www.w3schools.com/tags/movie.ogg"]'>
<div class="carousel__content">
<h4 class="carousel__title">Fresh Drops</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
See The Collection
</div>
<img src="https://www.fillmurray.com/g/300/500" class="carousel__image" />
</div>
</div>
</div>

How to change image width to fill all of the container, or align it to center?

I am setting up a slick slider and I want the image I use to fill all of the containers, but instead, it fills a portion of it aligned to left, depending on the width of the image. How I can fix it?
or displaying the image in the center...
You can see what I mean here:
https://fantarimo.blogspot.com/2019/05/test-247.html
const $left = $(".left");
const $gl = $(".gallery");
const $gl2 = $(".gallery2");
const $photosCounterFirstSpan = $(".photos-counter span:nth-child(1)");
$gl2.on("init", (event, slick) => {
$photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
$(".photos-counter span:nth-child(2)").text(slick.slideCount);
});
$gl.slick({
rows: 0,
slidesToShow: 2,
arrows: false,
draggable: false,
useTransform: false,
mobileFirst: true,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 1023,
settings: {
slidesToShow: 1,
vertical: true
}
}
]
});
$gl2.slick({
rows: 0,
useTransform: false,
prevArrow: ".arrow-left",
nextArrow: ".arrow-right",
fade: true,
asNavFor: $gl
});
function handleCarouselsHeight() {
if (window.matchMedia("(min-width: 1024px)").matches) {
const gl2H = $(".gallery2").height();
$left.css("height", gl2H);
} else {
$left.css("height", "auto");
}
}
$(window).on("load", () => {
handleCarouselsHeight();
setTimeout(() => {
$(".loading").fadeOut();
$("body").addClass("over-visible");
}, 300);
});
$(window).on(
"resize",
_.debounce(() => {
handleCarouselsHeight();
/*You might need this code in your projects*/
//$gl1.slick("resize");
//$gl2.slick("resize");
}, 200)
);
$(".gallery .item").on("click", function() {
const index = $(this).attr("data-slick-index");
$gl2.slick("slickGoTo", index);
});
$gl2.on("afterChange", (event, slick, currentSlide) => {
$photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
button {
background: none;
border: none;
outline: none;
cursor: pointer;
}
body {
font: normal 18px/1.5 monospace;
overflow: hidden;
background: #424242;
}
.over-visible {
overflow: visible;
}
.loading {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
background: white;
}
.container {
max-width: 880px;
padding: 20px 10px;
margin: 0 auto;
}
.synch-carousels {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.synch-carousels > * {
width: 100%;
}
.synch-carousels .right {
order: -1;
}
.synch-carousels .left {
overflow: hidden;
}
.synch-carousels .gallery {
display: none;
}
.synch-carousels .slick-slide {
outline: none;
}
.synch-carousels .slick-vertical .slick-slide {
border: none;
}
.synch-carousels .gallery .slick-list {
height: auto !important;
margin: 0 -20px;
}
.synch-carousels .gallery .slick-slide {
cursor: pointer;
}
.synch-carousels .gallery .slick-slide {
margin: 0 20px;
}
.synch-carousels .nav-arrows {
display: flex;
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
}
.synch-carousels .nav-arrows svg {
fill: white;
}
.synch-carousels .arrow-left {
margin-right: 35px;
}
.synch-carousels .photos-counter {
position: absolute;
top: 10px;
right: 0;
padding: 0 20px;
color: white;
background: #292929;
}
#media screen and (min-width: 480px) {
.synch-carousels .right {
margin-bottom: 20px;
}
.synch-carousels .gallery {
display: block;
}
}
#media screen and (min-width: 1024px) {
.synch-carousels .right {
position: relative;
width: calc(100% - 230px);
margin-bottom: 0;
order: 2;
}
.synch-carousels .left {
width: 210px;
}
.synch-carousels .gallery .slick-slide {
margin: 0 0 20px 0;
}
.synch-carousels .gallery .slick-list {
margin: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<div class="loading">Carousel is loading...</div>
<div class="container">
<div class="synch-carousels">
<div class="left child">
<div class="gallery">
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery1.jpg" alt="">
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery2.jpg" alt="">
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery3.jpg" alt="">
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery4.jpg" alt="">
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery5.jpg" alt="">
</div>
</div>
</div>
<div class="right child">
<div class="gallery2">
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery1.jpg" alt="" />
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery2.jpg" alt="" />
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery3.jpg" alt="" />
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery4.jpg" alt="" />
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery5.jpg" alt="" />
</div>
</div>
<div class="nav-arrows">
<button class="arrow-left">
<!--SVGs from iconmonstr.com-->
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.117 12l7.527 6.235-.644.765-9-7.521 9-7.479.645.764-7.529 6.236h21.884v1h-21.883z"/></svg>
</button>
<button class="arrow-right">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg>
</button>
</div>
<div class="photos-counter">
<span></span><span></span>
</div>
</div>
</div>
</div>

Change max-width to min-width on the image
img {
min-width: 100%;
height: auto;
}

Hi Did you see there is an outer div as below?
<div class="row" id="content-wrapper">
</div>
In this class, row has given width styles as 90% !important.
So get add the slider section to outer from this div section.
<div class="loading">Carousel is loading...</div>
<div class="container">
<div class="synch-carousels">
----
</div>
</div>
<div class="row" id="content-wrapper">
----
</div>
https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

Target This and Class not working as expected

For some reason, as you can see in my pen, when I hover over a learn more button it adds the details class to all the cards.
I've tried with no luck :
$(this).find('element')
And :
('', this)
//slick slider
$('.responsive').slick({
dots: true,
prevArrow: $('.prev'),
nextArrow: $('.next'),
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
//tilt
$('.tilt-card').tilt({
perspective: 1000,
})
//show details
$(".faction-more-btn").hover(
function() {
$('.description-overlay').addClass('desc-hover');
},
function() {
$(".description-overlay").removeClass('desc-hover');
}
);
$(document).ready(function() {
$('button').hover(function() {
$(this).text('Read More');
}, function() {
$(this).text('Learn More');
});
});
//scroll text
$(document).ready(function() {
var count;
var interval;
$(".faction-more-btn").on('mouseover', function() {
var div = $('.description-container');
interval = setInterval(function() {
count = count || 1;
var pos = div.scrollTop();
div.scrollTop(pos + count);
}, 100);
}).click(function() {
if (count < 6) {
count = count + 1;
}
}).on('mouseout', function() {
// reset the speed on out
count = 0;
clearInterval(interval);
$(".description-container").scrollTop(0);
});
});
* {
font-family: 'Exo', sans-serif;
}
body {
background: url("https://mankindreborn.com/wp-content/uploads/2018/04/newBG.jpg");
background-size: cover;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
padding-top: 100px;
}
img {
width: 100%;
height: 400px;
padding: 5px;
}
h2 {
text-align: center;
padding-bottom: 1em;
}
.slick-dots {
text-align: center;
margin: 0 0 10px 0;
padding: 0;
li {
display: inline-block;
margin-left: 4px;
margin-right: 4px;
&.slick-active {
button {
background-color: black;
}
}
button {
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: #999;
border: none;
width: 15px;
height: 15px;
border-radius: 50%;
}
:hover {
background-color: black;
}
}
}
/* Custom Arrow */
.prev {
color: #999;
position: absolute;
top: 38%;
left: -2em;
font-size: 1.5em;
:hover {
cursor: pointer;
color: black;
}
}
.next {
color: #999;
position: absolute;
top: 38%;
right: -2em;
font-size: 1.5em;
:hover {
cursor: pointer;
color: black;
}
}
#media screen and (max-width: 800px) {
.next {
display: none !important;
}
}
/* the slides */
.slick-slide {
margin: 0 10px;
}
/* the parent */
.slick-list {
margin: 0 -10px;
}
.slide {
position: relative;
}
.tilt-card {
overflow: visible;
transform-style: preserve-3d;
}
.faction-char-img {
width: 85%;
height: auto;
transform: translateZ(30px);
overflow: visible;
}
.faction-char-con {
position: absolute;
bottom: 0px;
}
.faction-logo-con {
position: absolute;
top: 10px;
}
.faction-logo {
width: 70%;
height: auto;
transform: translateZ(20px);
overflow: visible;
float: right;
margin-right: 10px;
}
.nsm-overlay {
position: absolute;
width: 96%;
margin-left: 6px;
top: 4px;
height: 200px;
background: url('https://i.imgur.com/xBr7FM1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: right;
transform: translateZ(30px);
}
.foe-overlay {
position: absolute;
width: 98%;
margin-left: 3px;
top: 4px;
height: 200px;
background: url('https://i.imgur.com/tyF6AgV.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: right;
transform: translateZ(30px);
}
.faction-more-btn {
position: absolute;
bottom: 20px;
margin-left: 53%;
z-index: 100;
transform: translateZ(50px);
background-color: #212121cc;
border: none;
color: #585858;
padding: 10px 20px 10px;
}
.faction-more-btn:hover {
background-color: #68ddda;
color: #000;
}
.description-overlay {
position: absolute;
width: 97%;
margin-left: 4px;
bottom: 0px;
height: 0%;
background-color: #0e0e0ef5;
z-index: 99;
transform: translateZ(37px);
transition: height 0.5s;
-webkit-transition: height 0.5s;
color: #fff;
padding-left: 25px;
padding-left: 25px;
}
.description-container {
margin-top: 20px;
overflow-y: scroll;
height: 185px;
padding-right: 20px;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
.description-container::-webkit-scrollbar {
display: none;
}
.desc-hover {
position: absolute;
width: 97%;
margin-left: 4px;
bottom: 0px;
height: 100%;
background-color: #0e0e0ea6;
z-index: 99;
transform: translateZ(37px);
transition: height 0.5s;
-webkit-transition: height 0.5s;
}
.description-overlay h2 {
text-align: left;
font-size: 20px;
margin-top: 30px;
padding-right: 10px;
}
.faction-type {
color: #68ddda;
margin-top: -25px;
}
.faction-details {
font-size: 10px;
}
.foe-tower {
position: absolute;
top: 0px;
height: 100%;
width: auto;
transform: translateZ(20px);
}
.foe-logo {
margin-right: -8px;
margin-top: -9px;
}
.nsm-img {
width: 70%;
}
.nsm-logo {
margin-top: -10px;
width: 65%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/gijsroge/tilt.js/38991dd7/dest/tilt.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12 heroSlider-fixed">
<div class="overlay">
</div>
<!-- Slider -->
<div class="slider responsive">
<div class="tilt-card slide">
<img src="https://i.imgur.com/eHkER1D.jpg">
<div class="nsm-overlay"></div>
<div class="description-overlay">
<h2>NORTH STAR MINING</h2>
<p class="faction-type">MEGACORP</p>
<p class="faction-details"><b>BASED:</b> Upper Copper City, Venus, Sol.</p>
<p class="faction-details"><b>FOUNDED:</b> -</p>
<div class="description-container">
<br><br>
<p>One of the oldest corporations still in existence and one of the Big Three Megacorps, North Star Mining has its origins on pre-space Earth. In 2045, a former mine supervisor for SA Mines named Dawie Copper took advantage of the privatisation
of his former employers and purchased several palladium mines in South Africa. By the start of the Second Space Race in 2075, the Copper Mining Group (CMG), owned almost all of the mines in South Africa and Copper’s son Anton had taken
the reins of the company...</p>
</div>
<p class="learn-more-text"></p>
</div>
<div class="faction-logo-con">
<img class="faction-logo nsm-logo" src="https://i.imgur.com/9GiEkjB.png">
</div>
<button class="faction-more-btn">Learn More</button>
<div class="faction-char-con">
<img class="faction-char-img nsm-img" src="https://i.imgur.com/nOpzEfF.png">
</div>
</div>
<div class="tilt-card slide">
<img src="https://i.imgur.com/urJ0pyz.png">
<img class="foe-tower" src="https://i.imgur.com/jm9Gjvw.png">
<div class="foe-overlay"></div>
<div class="description-overlay">
<h2>FOLLOWERS OF ETERNITY</h2>
<p class="faction-type">ANARCHO-TERRORISTS</p>
<p class="faction-details"><b>BASED:</b> Unknown, speculated near New Terra</p>
<p class="faction-details"><b>FOUNDED:</b> -</p>
<div class="description-container">
<br><br>
<p>The slums of Earth’s Mega-Cities proved to be the perfect breeding ground for fanaticism and dissent. The Followers of Eternity have no grounded history; their origin is fragmented amongst the various slums from where they came. The faction
started life as a quasi-charity group sometime in the early 22nd century seeking to improve the lives of those who lived in the squalled urban centers; they soon realized that real change would only come through anarchy. The 'charity'
organized into street gangs and set up 'education hubs' from which their movement gained a mass following amongst the young, oppressed low entry union workers and the many forgotten who dwell at street level. The group's aim is simple,
resist the Union and their corrupt corporate masters - modeling themselves as 'enlightened anarchists' out to smash the system...</p>
</div>
<p class="learn-more-text"></p>
</div>
<div class="faction-logo-con">
<img class="faction-logo foe-logo" src="https://i.imgur.com/y3gH30H.png">
</div>
<button class="faction-more-btn">Learn More</button>
<div class="faction-char-con">
<img class="faction-char-img" src="https://i.imgur.com/x45t5zh.png">
</div>
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
</div>
<!-- control arrows -->
<div class="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</div>
<div class="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
Live version on codepen

is this what you are looking for:
$(this).closest('.tilt-card').find('.description-overlay').addClass('desc-hover');
instead of
$('.description-overlay').addClass('desc-hover');
https://codepen.io/anon/pen/zJaPbQ
Your problem is that you are adding class to all elements with css class 'description-overlay', you have to add only to the one inside current tilt-card

Working codepen.
That happens because of the hover part bellow, you're using class selector $('.description-overlay') that will select all the elements with this class and add/remove class desc-hover.
$(".faction-more-btn").hover(
function() {
$('.description-overlay').addClass('desc-hover');
},
function() {
$(".description-overlay").removeClass('desc-hover');
}
);
Should use $(this) to target the related .description-overlay div of every button :
//show details
$(".faction-more-btn").hover(
function() {
$(this).siblings(".description-overlay").addClass('desc-hover');
},
function() {
$(this).siblings(".description-overlay").removeClass('desc-hover');
}
);
NOTE : Both functions you've tried doesn't work since they look inside the current hovered button when the div is a sibling of the button, so you could use siblings() function or the combination of parent()/closest() method and find() like :
$(this).parent().find(".description-overlay");
$(this).closest('.tilt-card').find(".description-overlay");
$(this).siblings(".description-overlay")

Hide on hover jQuery

I am using javascript to show/hide text inside a div on hover.
There are 4 div blocks with the same class - .main_content
Each block has a link and text. The text is hidden by default.
When the cursor is on .main_content, only the text of this block should appear. Why does the hover function not toggle the text?
$(document).ready(function() {
function hover() {
var IndexItem = getElementsByClassName("main_content");
if (IndexItem.hover()) {
index = IndexItem.index();
IndexItem: eq(index).toggle();
};
};;
})
#font-face {
font-family: "SevillaDecor";
/* Гарнитура шрифта */
src: url(/SevillaDecor.ttf);
/* Путь к файлу со шрифтом */
}
* {
margin: 0;
padding: 0;
}
body {
font-family: "SevillaDecor", Regular;
font-variant: small-caps;
font-weight: 600;
/* font-style: oblique; */
}
a {
display: block;
position: relative;
height: 100%;
width: 100%;
text-decoration: none;
color: #0af5ec;
}
.wrapper {
position: absolute;
/* top: 0px; */
/* left: 0px; */
/* clear: both; */
width: 100%;
height: 100%;
/* overflow: hidden; */
}
.text {
/* display: block; */
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
.main_content {
font-size: 30pt;
/* position: relative; */
float: left;
width: 50%;
height: 50%;
/* margin: 0; */
/* padding: 0; */
overflow: hidden;
/* background-size: cover; */
/* text-align: center !important; */
}
.main_content img {
/* position:absolute; */
/* min-width: 50%; */
/* max-width: 100%; */
/* background-size: cover; */
width: 100%;
height: 100%;
}
.block_center {
/* display:none; */
position: absolute;
width: 185pt;
height: 185pt;
/* font-size: 15pt; */
top: 50%;
left: 50%;
margin: -95pt;
overflow: hidden;
/* background-size: contain; */
/* text-align: center !important; */
}
.block_center img {
width: 100%;
height: 100%;
}
.block_center p {
display: block;
position: relative;
text-align: center;
font-size: 20px;
margin-top: 5%;
margin-bottom: 4%;
}
/*
.main_content::after {
content: ".";
display: block;
height: 0;
clear: both;
}
.main::after{
content: ".";
display: block;
height: 0;
clear: both;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="main_content">
<a href "#" class="back_image">
<img src="Images/1.jpeg" />
<div class="text">
<p> О нас </p>
</div>
</a>
</div>
<div class="main_content">
<a href="#" class="back_image">
<img src="Images/2.jpeg" />
<div class="text">
<p> Top </p>
</div>
</a>
</div>
<div class="main_content">
<a href="#" class="back_image">
<img src="Images/3.jpeg" />
<div class="text">
<p> New </p>
</div>
</a>
</div>
<div class="main_content">
<a href="#" class="back_image">
<img src="Images/4.jpeg" />
<div class="text">
<p> Исполнители </p>
</div>
</a>
</div>
<div class="block_center">
<a href="# " class="center_image ">
<img src="Images/vinyl.gif " />
<div class="text ">
<p> Личный кабинет </p>
<p> Гарантии </p>
<p> Оплата\Доставка </p>
<p> Контакты </p>
</div>
<!-- </a> -->
</div>
</div>

This is actually super simple.
There are two quick ways to do this. The easiest way is with the CSS :hover pseudo selector like this:
.text {
display:none;
}
.main_content:hover .text {
display: block;
}
Or with JavaScript by using the find() statement on your $(this) selector like this:
$('.main-content').mouseenter(function(){
$(this).find('.text').fadeIn();
});
$('.main-content').mouseleave(function(){
$(this).find('.text').fadeOut();
})

Pure CSS surely:
.main_content > a > .text {
display: none;
}
.main_content:hover > a > .text {
display: block;
}

Here you go with the solution https://jsfiddle.net/5ove7e46/
$(document).ready(function () {
$('.main_content').hover(function(){
$(this).find('div.text').toggle();
});
});
#font-face {
font-family: "SevillaDecor"; /* Гарнитура шрифта */
src: url(/SevillaDecor.ttf); /* Путь к файлу со шрифтом */
}
* {
margin:0;
padding:0;
}
body {
font-family: "SevillaDecor", Regular;
font-variant: small-caps;
font-weight: 600;
/* font-style: oblique; */
}
a {
display: block;
position: relative;
height: 100%;
width: 100%;
text-decoration: none;
color: #0af5ec;
}
.wrapper {
position: absolute;
/* top: 0px; */
/* left: 0px; */
/* clear: both; */
width: 100%;
height: 100%;
/* overflow: hidden; */
}
.text {
/* display: block; */
position: absolute;
display: none;
top:0;
height: 100%;
width: 100%;
}
.main_content {
font-size: 30pt;
/* position: relative; */
float: left;
width: 50%;
height: 50%;
/* margin: 0; */
/* padding: 0; */
overflow: hidden;
/* background-size: cover; */
/* text-align: center !important; */
}
.main_content img{
/* position:absolute; */
/* min-width: 50%; */
/* max-width: 100%; */
/* background-size: cover; */
width: 100%;
height: 100%;
}
.block_center {
/* display:none; */
position: absolute;
width: 185pt;
height: 185pt;
/* font-size: 15pt; */
top: 50%;
left: 50%;
margin: -95pt;
overflow: hidden;
/* background-size: contain; */
/* text-align: center !important; */
}
.block_center img {
width: 100%;
height: 100%;
}
.block_center p {
display: block;
position: relative;
text-align: center;
font-size: 20px;
margin-top: 5%;
margin-bottom: 4%;
}
/*
.main_content::after {
content: ".";
display: block;
height: 0;
clear: both;
}
.main::after{
content: ".";
display: block;
height: 0;
clear: both;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "wrapper">
<div class = "main_content" >
<a href="#" class = "back_image" >
<img src = "Images/1.jpeg"/>
<div class="text">
<p> О нас </p>
</div>
</a>
</div>
<div class = "main_content" >
<a href = "#" class = "back_image">
<img src = "Images/2.jpeg"/>
<div class = "text">
<p> Top </p>
</div>
</a>
</div>
Code changes
CSS
.text{display: none;}
JS
$('.main_content').hover(function(){
$(this).find('div.text').toggle();
});

$( ".main_content" ).hover(
function() {
$(this).show();
}, function() {
$(this).hide();
}
);

This effect can be achieved in CSS:
.main_content img {
opacity:1;
}
.main_content .text {
opacity:0;
}
.main_content .text,
.main_content img {
transition:opacity 0.6s linear;
}
.main_content:hover img {
opacity: 0;
}
.main_content:hover .text {
opacity: 1;
}
When you hover on the container, the img fades out and the text fades in, so that
only the text of this block should appear
#font-face {
font-family: "SevillaDecor";
/* Гарнитура шрифта */
src: url(/SevillaDecor.ttf);
/* Путь к файлу со шрифтом */
}
* {
margin: 0;
padding: 0;
}
body {
font-family: "SevillaDecor", Regular;
font-variant: small-caps;
font-weight: 600;
/* font-style: oblique; */
}
a {
display: block;
position: relative;
height: 100%;
width: 100%;
text-decoration: none;
color: #0af5ec;
}
.wrapper {
position: absolute;
/* top: 0px; */
/* left: 0px; */
/* clear: both; */
width: 100%;
height: 100%;
/* overflow: hidden; */
}
.text {
/* display: block; */
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
.main_content {
font-size: 30pt;
/* position: relative; */
float: left;
width: 50%;
height: 50%;
/* margin: 0; */
/* padding: 0; */
overflow: hidden;
/* background-size: cover; */
/* text-align: center !important; */
}
.main_content img {
/* position:absolute; */
/* min-width: 50%; */
/* max-width: 100%; */
/* background-size: cover; */
width: 100%;
height: 100%;
}
.block_center {
/* display:none; */
position: absolute;
width: 185pt;
height: 185pt;
/* font-size: 15pt; */
top: 50%;
left: 50%;
margin: -95pt;
overflow: hidden;
/* background-size: contain; */
/* text-align: center !important; */
}
.block_center img {
width: 100%;
height: 100%;
}
.block_center p {
display: block;
position: relative;
text-align: center;
font-size: 20px;
margin-top: 5%;
margin-bottom: 4%;
}
.main_content img {
opacity:1;
}
.main_content .text {
opacity:0;
}
.main_content .text,
.main_content img {
transition:opacity 0.6s linear;
}
.main_content:hover img {
opacity: 0;
}
.main_content:hover .text {
opacity: 1;
}
/*
.main_content::after {
content: ".";
display: block;
height: 0;
clear: both;
}
.main::after{
content: ".";
display: block;
height: 0;
clear: both;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="main_content">
<a href "#" class="back_image">
<img src="Images/1.jpeg" />
<div class="text">
<p> О нас </p>
</div>
</a>
</div>
<div class="main_content">
<a href="#" class="back_image">
<img src="Images/2.jpeg" />
<div class="text">
<p> Top </p>
</div>
</a>
</div>
<div class="main_content">
<a href="#" class="back_image">
<img src="Images/3.jpeg" />
<div class="text">
<p> New </p>
</div>
</a>
</div>
<div class="main_content">
<a href="#" class="back_image">
<img src="Images/4.jpeg" />
<div class="text">
<p> Исполнители </p>
</div>
</a>
</div>
<div class="block_center">
<a href="#" class="center_image">
<img src="Images/vinyl.gif " />
<div class="text ">
<p> Личный кабинет </p>
<p> Гарантии </p>
<p> Оплата\Доставка </p>
<p> Контакты </p>
</div>
<!-- </a> -->
</div>
</div>

$(document).ready(function () {
$('.main_content').mouseenter(function() {
$(this).find('.text').css('display','block');
});
$('.main_content').mouseleave(function() {
$(this).find('.text').css('display','none');
});
});