I have a page where there should be 2 rows, each containing two rectangular divs with content (image, h3 and paragraph). When clicking on the div, it has to flip in order to show its back content.
All the work is done with Bootstrap and the script is taken from
https://nnattawat.github.io/flip/.
The matter is simple yet impossible for me: those two rows stay on top of one another. All I need is for them to stay on different rows and be responsive.
This is my HTML:
<div class="container grid-container">
<div class="row">
<div class="card-grid col-md-6">
<div class="front">
<img src="images/1.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
<div class="card-grid col-md-6">
<div class="front">
<img src="images/2.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
</div>
<div class="row">
<div class="card-grid col-md-6">
<div class="front">
<img src="images/3.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
<div class="card-grid col-md-6">
<div class="front">
<img src="images/4.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
</div>
</div>
This is my CSS:
.card-grid{
perspective: 500px;
position:relative;
transform-style:preserve-3d;
}
.grid-container>.row>.card-grid>.front{
height:100%;
width:100%;
backface-visibility: hidden;
transform-style: preserve-3d;
position:absolute;
z-index:1;
transition:all 0.5s ease-out;
transform:rotateY(0deg);
}
.grid-container>.row>.card-grid>.back{
transform:rotateY(-180deg);
height:100%;
width:100%;
backface-visibility:hidden;
transform-style:preserve-3d;
position:absolute;
z-index:0;
transition:all 0.5s ease-out;
}
About CSS: I tried to make classes .front and .back less specific, then I tried to override Bootstrap's CSS file by making them more specific. No change.
And my main JS script is this:
$(function(){
$(".card-grid").flip({
trigger:"click"
});
});
I think below code helps you
Fiddle: https://jsfiddle.net/nadimsajib/bhx8fqvm/
HTML:
<div class="grid">
<div class="row">
<div id="card" class="card col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="front">
<img src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
<div style="height:500px;">
</div>
<div class="card col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="front">
<img src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
</div>
</div>
JS:
$(function($) {
$(".card").flip();
});
Related
I have a carousel, using owlCarousel, and I'm trying to make the elements in the carousel to expand on hover. The way it's implemented, is it's simply displayed: none by default, then on hover, it's displayed to block. Nothing fancy.
It's taken out of the flow by an absolute positioning, this way the carousel will not expand on element hover.
The problem is, when the element get's hovered, the details, expanded element doesn't show. I tried giving it a high z-index, but it doesn't seem to fix the problem. Here's the code:
CodePen FIle
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
body {
background-color: teal;
}
.owl-carousel {
background-color: orange;
}
.owl-carousel .item:hover .details {
display: block;
}
.owl-carousel .item-inner-wrapper {
position: relative;
}
.owl-carousel h4 {
background-color: yellow;
height: 100px;
}
.owl-carousel .details {
background-color: pink;
height: 300px;
position: absolute;
top: 100%;
bottom: 0;
right: 0;
left: 0;
display: none;
z-index: 20;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="item-inner-wrapper">
<h4>1</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>2</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>3</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>4</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>5</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>6</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>7</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>8</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>9</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>10</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>11</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>12</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
See if this will work for you:
Set .owl-carousel .item to your content height + detail height (I used 200px)
Set margin-top of .owl-carousel.owl-theme .owl-nav to -(detail height) + 10px (it was originally 10px)
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
body {
background-color: teal;
}
.owl-carousel {
background-color: orange;
}
.owl-carousel .item {
height: 200px;
}
.owl-carousel .item:hover .details {
display: block;
}
.owl-carousel .item-inner-wrapper {
position: relative;
}
.owl-carousel h4 {
background-color: yellow;
height: 100px;
}
.owl-carousel .details {
background-color: pink;
height: 100px;
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
}
.owl-carousel.owl-theme .owl-nav {
margin-top: -90px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="item-inner-wrapper">
<h4>1</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>2</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>3</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>4</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>5</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>6</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>7</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>8</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>9</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>10</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>11</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>12</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
You can try not giving a top value, and instead a height of auto to .details
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
body {
background-color: teal;
}
.owl-carousel {
background-color: orange;
}
.owl-carousel .item:hover .details {
display: block;
}
.owl-carousel .item-inner-wrapper {
position: relative;
}
.owl-carousel h4 {
background-color: yellow;
height: 100px;
}
.owl-carousel .details {
background-color: pink;
position: absolute;
bottom: 0;
right: 0;
left: 0;
display: none;
height: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="item-inner-wrapper">
<h4>1</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>2</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>3</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>4</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>5</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>6</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>7</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>8</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>9</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>10</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>11</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>12</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
I am working with some sort of E-Shop Template and I can only manipulate some stuff with Jquery and JS.
Problem No 1:
I want to give the first box with the Content "Hello and Welcome!" and some background-Image. Problem is, that this box has some padding and I need to set the Background to the parent "inner-Wrapper" of this Div.
Is there a way to select the first "inner-wrapper" and check if the Content is "hello and welcome!" in the Content-box?
Problem No 2:
Box 1 - Box 4 Need another Background-Image.
I know some basic Jquery stuff but I struggle with those advanced stuff. And after 4 hours of trial and error I have to ask you guys.
I hope you can help me, and thanks in advance!
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Hello and Welcome!
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
<img src="" alt="">
</div>
</div>
</div>
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Box 1
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 2
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 3
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 4
</div>
</div>
</div>
Instead of checking the text you can add an extra class and check for that class Or you can give a seperate background image for the $('.content-box') inside the first .inner-wrapper
$(function(){
$('.content-box').each(function(){
if($(this).hasClass('firstBox')){
$(this).parent().css('background-image', 'url(http://via.placeholder.com/350x150)');
}else{
$(this).parent().css('background-image', 'url(http://via.placeholder.com/150x150)');
}
})
})
.inner-wrapper{
width:100px;
height:100px;
background-size: cover;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="inner-wrapper">
<div class="content-box firstBox">
Hello and Welcome!
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
<img src="" alt="">
</div>
</div>
</div>
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Box 1
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 2
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 3
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 4
</div>
</div>
</div>
I'm working on a project available on JSFiddle. As you can notice, there are 6 items displayed and I would like to make a carousel to display 3 items per slide. After researching this issue, I find this awesome project on Codepen.
Each item of my project is represented by the following code:
<div class="wrapper">
<img src="https://photos-2.dropbox.com/t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
while the item on Codepen is represented by this one:
<div class="item active">
<div class="col-xs-4">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
Whenever I try to remove the item's code in Codepen and place my item's code from JSFiddle, the slider stops working.
Please let me know how to solve this problem.
Is this what you wanted? Please check fiddle, you will understand, why it wasn't working. You may have missed some libraries and CSS.
$('#theCarousel').carousel({
interval: false
})
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
.multi-item-carousel{
.carousel-inner{
> .item{
transition: .6s ease-in-out all;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
#media all and (transform-3d), (-webkit-transform-3d) {
&{
.carousel-inner {
> .item{
transition: .6s ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-perspective: none;
-webkit-transform: none!important;
transform: none!important;
}
}
}
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 wrapper">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/e91e63/000000" class="img-responsive">
<div class="overlay">
<h5 class="header">A Movie in the Park: Kung Fu Panda</h5>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/9c27b0/000000" class="img-responsive">
<h5 class="header">Batman Return</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/673ab7/000000" class="img-responsive">
<h5 class="header">Deadpool</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/4caf50/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/8bc34a/000000" class="img-responsive">
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
Read the carousel documentation and notice the format of each item (specifically the addition of .item and .active).
This wrapper around each image is making it so that 3 elements are displayed per row:
<div class="col-xs-4">
...
</div>
(in comparison, using .col-xs-12 would indicate 1 image per displayed row, and .col-xs-6 would indicate 2 images per displayed row)
I wish bootstrap had a build in feature where it would assign wrapper div of any item with height based on the height of largest div.
In this fiddle example you will notice that i have video-item-wrapper of different height which breaks the design, I can assign min-height but then i have to write css for different screen size (& still it will break at some point)
Can i with jquery get the max- height of div and assign that to all video-item-wrapper dive so that all divs will be of same height and will not break design also
<div class="container">
<div class="rows v-wrapper">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff&text=>"/>
</div>
</div>
<div class="video-details-wrapper"> <span>this is video short video title</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fffplacehold" />
</div>
</div>
<div class="video-details-wrapper"> <span>this is long video title this is long video title this is long video title</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff" />
</div>
</div>
<div class="video-details-wrapper"> <span>this is very very long video title this is very very long video title this is very very long video title</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff" />
</div>
</div>
<div class="video-details-wrapper"> <span>this is video title</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff" />
</div>
</div>
<div class="video-details-wrapper"> <span>this is video title</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff" />
</div>
</div>
<div class="video-details-wrapper"> <span>this is video title this is video title this is video title this is video title</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff" />
</div>
</div>
<div class="video-details-wrapper"> <span>this is video title</span>
</div>
</div>
</div>
</div>
</div>
Here my solution which works fine and without any hasle..
https://fiddle.jshell.net/w75vaho2/30/show/
Solution based on comment made by jme11 user
CSS
.play-item {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.v-wrapper {
max-width:1000px;
margin:0 auto;
}
.video-item-wrapper
{
border-bottom:30px solid green;
}
.video-image-wrapper {
position:relative;
width:100%;
}
.video-image-wrapper .img-responsive {
width:auto;
position:relative;
z-index:1;
}
.video-image-wrapper .play-item {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
z-index:2;
}
/* add a little bottom space under the images */
#media (max-width: 767px) {
.portfolio>.clear:nth-child(2n)::before {
content: '';
display: table;
clear: both;
}
}
#media (min-width: 768px) and (max-width: 989px) {
.portfolio>.clear:nth-child(4n)::before {
content: '';
display: table;
clear: both;
}
}
#media (min-width: 990px) and (max-width: 1199px) {
.portfolio>.clear:nth-child(6n)::before {
content: '';
display: table;
clear: both;
}
}
#media (min-width: 1200px) {
.portfolio>.clear:nth-child(8n)::before {
content: '';
display: table;
clear: both;
}
}
HTML
<div class="container">
<div class="row v-wrapper portfolio">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is video short video title</span>
</div>
</div>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is long video title this is long video title this is long video title</span>
</div>
</div>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is very very long video title this is very very long video title this is very very long video title</span>
</div>
</div>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is video title</span>
</div>
</div>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is video title</span>
</div>
</div>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is video title this is video title this is video title this is video title</span>
</div>
</div>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is video title</span>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
Using jQuery (based on this)
I noticed that this approach has a flaw for example suppose first largest div height is 400px then it apply across all divs in all row event if they don't have more than 1 line of title adds necessary space to other rows which only have small title,
Fiddle example
var row=$('.portfolio');
$.each(row, function() {
var maxh=0;
$.each($(this).find('div[class^="col-"]'), function() {
if($(this).height() > maxh)
maxh=$(this).height();
});
$.each($(this).find('div[class^="col-"]'), function() {
$(this).height(maxh);
});
});
I created a grid with col-md-7 on the left and col-md-5 on the right.
And I put images to the col-md-5, which are responsive and in col-md-12 width - full width
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-7">LEFT SIDE</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://jsfiddle.net/r8rFc/298/
It works great without any problems.
However, I use a menu called Zozo UI tabs.
When I put my code into Zozo UI container div, the images overlap rather than staying on top of each other.
Thus, it just show the last IMG
I would add the whole code to here but unfortunately it has a lot of dependencies.
Please check from here.
xxx
<!-- Overview -->
<div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;">
<div class="z-content-inner">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
LEFT
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Need a way to get that images on the top of each other rather than overlapping.
You have
.productgroup img {
position: absolute;
}
it seems to be the reason of your problem.