Develop Reference

How to separate two images in the same row?

do you know how to separate two images in the same row?
Thank you so much for your help.
I will post the image under this sentence.
Image
<div id="portfolio">
<div class="container-fluid w-75">
<div class="row">
<div class="col-sm-6 col-xs-12 text-center">
<div class="zgrade">
<img class="img-fluid" src="assets/img/szgrade/zgradaA.jpg" alt="..." />
<h2 class="zgrade-txt" style="color:white"> Zgrada A </h2>
</div>
</div>
<div class="col-sm-6 col-xs-12 text-center">
<div class="zgrade">
<img class="img-fluid" src="assets/img/szgrade/zgradaB.jpg" alt="..." />
<h2 class="zgrade-txt" style="color:white"> Zgrada B </h2>
</div>
</div>
</div>
</div>
</div>
Css
.zgrade {
position: relative;
border: 1px solid #333;
overflow: hidden;
width: 745px;
}
.zgradeimg {
width: 500px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.4s ease-in-out;
}
.zgrade:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.zgrade-txt {
position: absolute;
top: 250px;
left: 0;
width: 100%;
Edit: Added CSS code, I tried adding br and span in HTML code.

We could use simple css to add a margin to the element. This would create empty space between the elements.
Add this to your external stylesheet or in your html file(best place is head):
<style>
.img-fluid {
margin-right: 20px; /*feel free to change this to any amount*/
}
</style>
or
style="margin-right:20px"
Margin is space outside of an element, which mostly acts like white space. It is counted in the element size but it is outside the border and background color does not effect it.

I solved the problem, I increased w of the container from 75 to 80, but I needed to add a new class in CSS (that would be w-80).

Add and Remove Keyframe on time

I have 3 moving objects with my keyframe:
#keyframes rotation {
0% {
transform: rotateY(0deg)
}
10% {
transform: rotateY(55deg)
}
30% {
transform: rotateY(55deg)
}
60% {
transform: rotateY(230deg)
}
80% {
transform: rotateY(230deg)
}
100% {
transform: rotateY(360deg)
}
}
this moves my object ->
css:
.object{
position: relative;
margin: auto;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(230deg);
}
.cb2 {
animation: rotation 20s infinite linear;
}
Now I want the first object to spin once then when it's done the second one should spin, when the second one is done the third one should spin.
I tried something like this:
setTimeout(function() {
$("#first").addClass('cb2');
}, 10000);
setTimeout(function() {
$("#first").removeClass('cb2');
}, 16500);
setTimeout(function() {
$("#second").addClass('cb2');
}, 16600);
setTimeout(function() {
$("#second").removeClass('cb2');
}, 29900);
setTimeout(function() {
$("#third").addClass('cb2');
}, 30100);
First of all, that doesn't really work, because it's not really smooth but the main problem is, that this will do the job once, but I want to loop this.
Is that possible ?
HTML:
<div id="container">
<div id="thrdcb" class="position-absolute displayres" style="top:100px;left: 10%;bottom:0;pointer-events: none;">
<div class="container">
<div class="row mt-5">
<div class="col">
<div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" class="wontainer">
<div class="navbar"></div>
<div class="news-grid">
<div class="news-card">
<div id="firstcube" class="object">
<div class="face one">
<p id="firstnewssub" style="position: relative; background-color: #a3ba1e; padding: 10px;">
</p>
</div>
<div class="face two">
<p id="firstnewssub2" style="position: relative; background-color: #a3ba1e; padding: 10px;">
</p>
</div>
<div class="face three">
<img src="data/img/testasdd.png" alt="" />
<p id="aaaae" style="position: relative; background-color: #a3ba1e; padding: 10px;">
</p>
</div>
<div class="face four">
<img src="data/img/asddfff.png" alt="" />
<p id="firstnews2" style="position: relative; background-color: #a3ba1e; padding: 10px;">
</p>
</div>
</div>
<a id="rrzuii" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="7" data-chapter="1"
data-names="opacity, pointer-events" data-start-values="0, none" data-end-values="1, all" data-delay="1000" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" class="asdz7">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="scndcb" class="position-absolute displayres" style="top:100px;right: 10%;bottom:0;pointer-events: none;">
<div class="container">
<div class="row mt-5">
<div class="col">
<div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" class="wontainer">
<div class="news-grid">
<div class="news-card">
<div id="thirdcube" class="object">
<div class="face one">
<p id="lppzz" style="position: relative; background-color: #62798b; padding: 10px;">
</p>
</div>
<div class="face two">
<p id="iottt" style="position: relative; background-color: #62798b; padding: 10px;">
</p>
</div>
<div class="face three">
<img src="data/img/asdaqqqqq.png" alt="" />
<p id="thirdnews1" style="position: relative; background-color: #62798b; padding: 10px;">
</p>
</div>
<div class="face four">
<img src="data/img/uthhase.png" alt="" />
<p id="thirdnews2" style="position: relative; background-color: #62798b; padding: 10px;">
</p>
</div>
</div>
<a id="aaklptt" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="7" data-chapter="1" data-names="opacity, pointer-events"
data-start-values="0, none" data-end-values="1, all" data-delay="1000" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" class="-blue">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="cubepointer" class="position-absolute displayres" style="top: 100px; left: 20%; right: 20%; bottom: 0px;pointer-events: none;">
<div class="container">
<div class="row mt-5">
<div class="col">
<div data-index="7" data-chapter="1" data-names="opacity,margin-left" data-start-values="0,-10px" data-end-values="1,0" data-delay="1000" style="opacity: 0;" class="wontainer">
<div class="news-grid">
<div class="news-card">
<div id="secondcube" class="object">
<div class="face one">
<p id="dghh" style="position: relative; background-color: #e07a0c; padding: 10px;">
</p>
</div>
<div class="face two">
<p id="aas" style="position: relative; background-color: #e07a0c; padding: 10px;">
</p>
</div>
<div class="face three">
<img src="data/img/adasd.png" alt="" />
<p id="ffss" style="position: relative; background-color: #e07a0c; padding: 10px;">
</p>
</div>
<div class="face four">
<img src="data/img/testm.png" alt="" />
<p id="zz" style="position: relative; background-color: #e07a0c; padding: 10px;">
</p>
</div>
</div>
<a id="rdda" href="https://example.com" target="_blank" rel="noopener noreferrer" data-index="99" data-chapter="1" data-names="opacity, pointer-events" data-start-values="0, none" data-end-values="1, all"
data-delay="9999" style="opacity: 0; margin-left: 0px;text-align: center; cursor: pointer;display: none;" class="font-weight font">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You can make use of the animation event. In your case the animation is defined as animation: rotation 20s infinite linear;, so to stop the animation and start the next you need to look for the animationiteration event.
I wrapped the elements in a <div> for the event listener. At the same time this wrapper can be used for finding the next element to animate.
const container = document.getElementById('container');
//container.addEventListener('animationend', e => {
container.addEventListener('animationiteration', e => {
$(e.target).removeClass('cb2');
let next = e.target.parentElement.querySelector(`div#${e.target.id}~div.object`);
if(next){
$(next).addClass('cb2');
}else{
$(e.target.parentElement.querySelector(`div.object`)).addClass('cb2');
}
});
// initiate animation
$(container.querySelector(`div.object`)).addClass('cb2');
#keyframes rotation {
0% {
transform: rotateY(0deg)
}
10% {
transform: rotateY(55deg)
}
30% {
transform: rotateY(55deg)
}
60% {
transform: rotateY(230deg)
}
80% {
transform: rotateY(230deg)
}
100% {
transform: rotateY(360deg)
}
}
.object {
position: relative;
margin: auto;
height: 100px;
width: 100px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(230deg);
}
.cb2 {
animation: rotation 20s infinite linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="first" class="object">A</div>
<div id="second" class="object">B</div>
<div id="third" class="object">C</div>
</div>
Update
The first example assumes that all the div.object elements are siblings. The following example is showing how div.object elements can be in a nested structure. In this case there is a need for a variable objects that hold all the div.objects. The selection of the next element happens based on the index of the current element in the array.
const container = document.getElementById('container');
const objects = container.querySelectorAll('.object');
container.addEventListener('animationiteration', e => {
$(e.target).removeClass('cb2');
let currentIndex = [...objects].indexOf(e.target);
let next = objects[currentIndex+1];
if(next){
$(next).addClass('cb2');
}else{
$(objects[0]).addClass('cb2');
}
});
// initiate animation
$(objects[0]).addClass('cb2');
#keyframes rotation {
0% {
transform: rotateY(0deg)
}
10% {
transform: rotateY(55deg)
}
30% {
transform: rotateY(55deg)
}
60% {
transform: rotateY(230deg)
}
80% {
transform: rotateY(230deg)
}
100% {
transform: rotateY(360deg)
}
}
.object {
position: relative;
margin: auto;
height: 100px;
width: 100px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(230deg);
}
.cb2 {
animation: rotation 20s infinite linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div>
<div id="first" class="object">A</div>
</div>
<div>
<div id="second" class="object">B</div>
</div>
<div>
<div id="third" class="object">C</div>
</div>
</div>

While it is theoretically possible to do this in CSS, using one set of keyframes and the animation-delay CSS property, there is a possibility that timings could get out of step, as pointed out in a comment (depending for example how busy the system is with other things).
This snippet therefore sets the animation going for one cycle on the first object, listens for when that animation ends, removes the animation and puts it onto the next object and so on. That way it is guaranteed to keep in step sequentially, even if things get a little delayed sometime.
const objects = document.querySelectorAll('.objects > *');
const num = objects.length;
let n = 0;
objects.forEach(object => {
object.addEventListener('animationend', function() {
object.classList.remove('cb2');
n = (n + 1) % num;
objects[n].classList.add('cb2');
});
});
objects[n].classList.add('cb2');
#keyframes rotation {
0% {
transform: rotateY(0deg)
}
10% {
transform: rotateY(55deg)
}
30% {
transform: rotateY(55deg)
}
60% {
transform: rotateY(230deg)
}
80% {
transform: rotateY(230deg)
}
100% {
transform: rotateY(360deg)
}
}
.objects>* {
position: relative;
margin: auto;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(230deg);
}
.objects>*:nth-child(1) {
background: cyan;
}
.objects>*:nth-child(2) {
background: magenta;
}
.objects>*:nth-child(3) {
background: yellow;
}
.cb2 {
animation: rotation 20s 1 linear;
}
<div class="objects">
<div></div>
<div></div>
<div></div>
</div>

Jquery - Animation as Slide

Hello I've simple animation car using HTML & CSS & JQuery but I'd like to add some effects, for example I need to stop car wheel rotation after the car come in and run the car wheel rotation when the car started to leave the screen, this was the first Problem.
Second Problem
that I need when the car is come in screen change the car angle (rotate) and reduce the car speed.
and when the car is started to leave the screen, animation the car angle (rotate) and increase the car speed.
Youtube Video
Here my code:
$('.wheelEleContainer .slectWheel').click(function (e) {
e.preventDefault();
var getImgWheel = $(this).find('img').attr('src');
$('.car .car__wheel').css('background-image',
'url(' + getImgWheel + ')'
);
});
var $cars = $('.car');
$('.car-model').on('click', function () {
var $current = $cars.find('.current');
var $next = $current.next();
if ($next.length === 0) $next = $current.prevAll().last();
$current.addClass('car--trans-out');
setTimeout(function () {
$current.removeClass('current').removeClass('car--trans-out');
$next.addClass('current').addClass('car--trans-in');
setTimeout(function () {
$next.removeClass('car--trans-in');
}, 1000)
}, 1000);
})
.car{
height:600px;
padding:40px 0;
background-color:#efefef;
overflow:hidden;
}
.car .click{
width:100%;
padding:10px;
text-align:center;
border:1px solid #0094ff;
margin-bottom:30px;
}
.car-image-container{
position: absolute;
left: 100%;
overflow: hidden;
}
.current{
position: relative;
left: 0;
}
.current .current{
left: 0;
}
.car .car-image .car__wheel{
width:99px;
height:100px;
position:absolute;
background-repeat:no-repeat;
background-position:center center;
}
.car .car-image .car__wheel.left{
background-image:url('http://store6.up-00.com/2017-03/148992740531661.png');
top:94px;
left:98px;
}
.car .car-image .car__wheel.right{
background-image:url('http://store6.up-00.com/2017-03/148992740544512.png');
top:94px;
right:75px;
}
.car--trans-in .car__wheel{
animation: roll-in 400s ease-out;
}
.car--trans-out .car__wheel{
animation: roll-out 400s ease-out;
}
.car--trans-in .car-image{
animation: trans-in 1s ease-out;
}
.car--trans-out .car-image{
animation: trans-out 1s ease-in;
}
.car--trans-in .car__wheel{
animation: roll-in 1s ease-out;
}
.car--trans-out .car__wheel{
animation: roll-out 1s ease-out;
}
.car--trans-in .car-image img{
animation: bounce-in 1s ease-out;
}
.car--trans-out .car-image img{
animation: bounce-out 1s ease-in;
}
#keyframes trans-in {
0% {transform: translateX(100%);}
80% {transform: translateX(0%);}
100% {transform: translateX(0%);}
}
#keyframes trans-out {
0% {transform: translateX(0%);}
10% {transform: translateX(0%);}
80% {transform: translateX(-100%);}
100% {transform: translateX(-100%);}
}
#keyframes roll-in {
0% {transform: rotate(0deg);}
80% {transform: rotate(-720deg);}
100% {transform: rotate(-720deg);}
}
#keyframes roll-out {
0% {transform: rotate(0deg);}
100% {transform: rotate(-720deg);}
}
#keyframes bounce-in {
0% {transform: rotate(2deg);}
70% {transform: rotate(2deg);}
80% {transform: rotate(-1deg);}
90% {transform: rotate(1deg);}
100% {transform: rotate(0deg);}
}
#keyframes bounce-out {
0% {transform: rotate(0deg);}
20% {transform: rotate(2deg);}
100% {transform: rotate(2deg);}
}
.car .wheelEleContainer{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="car">
<div class="container">
<button>Next</button>
<div class="row">
<div class="car-button-container">
<div class="col-md-2 col-md-offset-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="1">
Car Model 1
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="2">
Car Model 2
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="3">
Car Model 3
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="4">
Car Model 4
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div class="col-lg-7 col-lg-offset-2">
<div class="car-image-container current">
<div class="car-image" data-car-index="1">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
<div class="car__wheel left"></div>
<div class="car__wheel right"></div>
</div>
</div>
<div class="car-image-container">
<div class="car-image" data-car-index="2">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727122822.png" alt="" />
<div class="car__wheel left"></div>
<div class="car__wheel right"></div>
</div>
</div>
<div class="car-image-container">
<div class="car-image" data-car-index="3">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727131353.png" alt="" />
<div class="car__wheel left"></div>
<div class="car__wheel right"></div>
</div>
</div>
<div class="car-image-container">
<div class="car-image" data-car-index="4">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727151114.png" alt="" />
<div class="car__wheel left"></div>
<div class="car__wheel right"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="wheelEleContainer">
<div class="col-lg-1 col-lg-offset-2">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740561243.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/14899275127831.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740580684.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Note: please run code snippet in fullscreen

You could use CSS animations to get the car to transition into the frame, another animation to make the car rotate as it is moving.
Take a look at this example jsFiddle I have done.
I am using a html structure like this:
<div class="cars">
<div class="car">
<div class="car__inner">
<div class="car__chassis">
</div>
<div class="car__wheels">
<div class="car__wheel car__wheel--left">
</div>
<div class="car__wheel car__wheel--right">
</div>
</div>
</div>
</div>
...
</div>
Using jQuery I am adding some classes to the <div class="car"> which will allow us to attach CSS animations.
var $cars = $('.cars');
$('button').on('click', function(){
var $active = $cars.find('.car--active');
var $next = $active.next();
if($next.length===0) $next = $active.prevAll().last();
$active.addClass('car--trans-out');
setTimeout(function(){
/*Wait a second before removing the class*/
$active.removeClass('car--active').removeClass('car--trans-out');
$next.addClass('car--active').addClass('car--trans-in');
setTimeout(function(){
$next.removeClass('car--trans-in');
},1000)
},1000);
})
Edit: Here is another jsFiddle which is using the same markup and script as the original post with the addition of some class names and animations

jquery different image smooth hover with background on all browsers

I am trying to make an image hover with background behind.
The problem is that this is not working smooth on all browsers. I want the background immediately hover when the mouse enters the image. how can i make this smooth and work on all browsers?
HTML:
<div class="col-lg-12 col-md-12 col-sm-12 col-sx-12 portfolio" id="work">
<div class="container">
<div class="row">
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#nieuwecreatie">
<img src="image/nieuwecreatie.jpg" alt="nieuwecreatie" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#avpro">
<img src="image/avpro.jpg" alt="avpro" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#fuxing">
<img src="image/fuxing.jpg" alt="fuxing" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6 hidden-sm">
<a href="#seedsofhope">
<img src="image/seedsofhope.jpg" alt="seedsofhope" class="transition"/>
</a>
</section>
</div>
<div class="row">
<section class="col-lg-3 col-sm-4 col-xs-6 visible-sm">
<a href="#seedsofhope">
<img src="image/seedsofhope.jpg" alt="seedsofhope" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#beneluxtaxi">
<img src="image/benelux-taxi.jpg" alt="benelux-taxi" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#intergroep">
<img src="image/intergroep.jpg" alt="intergroep" class="transition"/>
</a>
</section>
</div>
</div>
<div id="hovercontent" class="transition"></div>
</div>
CSS:
.transition{transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;}
.portfolio{padding:150px 0; position:relative;}
.portfolio #hovercontent{position:absolute; top:0; left: 0; width:100%; height:100%; background-size: 100% !important; z-index:-999; opacity: 0.4;}
.portfolio section{opacity: 0; margin-bottom:20px;}
.portfolio section img{width:100%; position: relative;}
.portfolio section .item-layer{display:none; width:100%; height:100%; background:rgba(0,0,0,0.5); position: absolute; top:0; left:0; text-align: center; padding-top:100px; font-family: BebasNeue; font-size: 2em; color:white;}
.portfolio section img:hover{margin:-10px 0 0 0;}
jQuery:
//load bg images
$('#hovercontent').fadeOut();
if(window.location.hash || !window.location.hash){
history.replaceState(null, null,' ');
var url = $(location).attr('href')+'image/';
}
$('.portfolio img').mouseenter(function(){
var srcValue = $(this).attr('src').split('/');
srcValue = srcValue[1].split('.');
srcValue = srcValue[0]+'-bg';
$('#hovercontent').fadeIn(function() {
$(this).css('background', 'url('+url+srcValue+'.jpg) no-repeat');
});
});
What am I doing wrong and how can I fix it?

Check out this fiddle and change it to your needs. Store your image in a data= attribute.
HTML:
Red BG
Green BG
Blue BG
Yellow BG
Javascript:
$(document).ready(function(){
$('a').mouseenter(function(){
var self = $(this),
color = self.data('color');
$('body').css('background-color',color);
});
});
CSS:
body {
background-color: pink;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
Change it to fit your needs, this snippet is easily cofigurable and it works in all modern browsers (>IE9, Chrome, Safari, Firefox, Mobile etc...). To set images as background, I would use it like this:
HTML:
Some BG
JS:
$(document).ready(function(){
$('a').mouseenter(function(){
var self = $(this),
url = self.data('bg-url');
$('body').css('background-image', url);
});
});
CSS:
body {
background-color: pink;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
EDIT TO ENABLE BACKGROUND IMAGE SUPPORT
Check out this fiddle. It's not the nicest solution but it works as expected.
For each link it creates a DIV with a background-image. After this the corresponding div is shown based on the hovered link.
HTML
One
Two
Three
Four
CSS
.bgholder {
-webkit-transition:opacity 1s;
-moz-transition:opacity 1s;
-o-transition:opacity 1s;
transition:opacity 1s;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-size: contain;
background-repeat: no-repeat;
}
a {
position: relative;
z-index: 2;
}
JS
$(document).ready(function(){
$('a').each(function(i){
var self = $(this),
bg = self.data('bg'),
container = '<div class="bgholder" id="back-'+i+'" style="background-image: url('+bg+');"></div>';
self.data('trigger', 'back-'+i);
$('body').append(container);
});
$('a').mouseenter(function(){
var self = $(this),
cont = self.data('trigger');
$('.bgholder').css('opacity',0);
$('#'+cont).css('opacity',1);
});
});

issues with injected content sizing

I am creating a "live search" feature, this works fine functionally, however, on responsive testing, it breaks almost as soon as you get to tablet/mobile size.
I am using bootstrap for layout and the injected content from the live search is basically just a template that is injected.
Here is my HTML, SCSS and JS as it stands:
$(function() {
$(".brand-page-search-box").on("input", function(e) {
e.preventDefault();
var containerTemplate,
itemTemplate,
root = 'http://jsonplaceholder.typicode.com';
containerTemplate = `<div class="row search-result-item-container"></div>`;
$.ajax({
url: root + '/posts/1',
method: 'GET'
}).then(function(data) {
$(".search-results").html(containerTemplate);
let returnedJSONToObj = JSON.parse(JSON.stringify(data)),
userID = returnedJSONToObj.userId,
id = returnedJSONToObj.id,
title = returnedJSONToObj.title,
body = returnedJSONToObj.body;
itemTemplate = `<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="flip-container">
<div class="card card-inverse">
<div class="front">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
<div class="back">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="flip-container">
<div class="card card-inverse">
<div class="front">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
<div class="back">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
</div>
</div>
</div>`;
$(".search-result-item-container").append(itemTemplate);
});
return false;
});
});
.flip-container {
-webkit-perspective: 1000;
perspective: 1000;
.card {
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
&: hover {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
z-index: 2;
.card-block {
background: url("http://lorempixel.com/1920/1080/");
}
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
.card-block {
background: url("http://lorempixel.com/900/500/");
}
}
}
}
<div class="container-fluid brand-search-bar">
<div class="row">
<div class="col-xs-12">
<nav class="navbar">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item">
<form action="#" id="form">
<div class="input-group">
<input type="text" class="form-control brand-page-search-box" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="container brand-img-container search-results"></div>
Now, the cards inject into the post fine, but look at the following screens to see how the sizing goes:
Desktop:
Laptop/Tablet:
Mobile:
As you can see, on mobile, it totally breaks for some reason and the cards "fold" into one another, but if bootstrap is meant to be handling the layout, why is this happening?
The inspector isnt being much help, nor are some of the articles I have been reading on here and elsewhere, unusually, anyone got any ideas on how to fix this?
I am using bootstrap 4 and jquery 2 if that helps.
If you have any questions, comments or requests, please do ask in the comments below.

You need to fix the flip effect css. Nothing to do with twitter bootstrap.
Your .flip-container is not getting height, so in xs when many containers stack you see the probleme.
You could set a fixed height for your .flip-container but since you want dynamic height here is a solution
Add .front{ position:relative} and .back{top: 0}
.flip-container {
-webkit-perspective: 1000;
perspective: 1000;
.card {
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
&:hover {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
z-index: 2;
position:relative; <---
.card-block {
background: url("http://lorempixel.com/1920/1080/");
}
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
top:0; <---
.card-block {
background: url("http://lorempixel.com/900/500/");
}
}
}
}