We Keep Coding

Background Change to Css with thumbnail in JS

good day.... is there a way to change the background image of div while using Slick.Js ? say for example, if i press one of the image thumbnail, the background of div would change. so far my code is not reliable when it comes for example different image sizes
im not sure how to change the background image of div if i press each images in the slick carousel
$(document).ready(function() {
$('.slider-for').slick({
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
fade: true,
asNavFor: '.thumbnails'
});
$('.thumbnails').slick({
slidesToShow: 9,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
arrows: false,
centerMode: true,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 2000
});
});
* {
margin: 0 auto;
padding: 0
}
body {
font-family: "Open Sans", sans-serif;
color: black;
}
.slid {
width: 100%;
}
.thumbnail-img {
cursor: pointer;
}
.slider-for {
position: relative;
width: 100%;
}
.thumbnails {
margin-top: -300px;
}
.cc {
position: relative;
}
.slider-for {
position: absolute;
}
.some {
z-index: 9999;
position: absolute;
}
/** HEADER **/
.banner-img {
background-size: fill;
width: 100%;
}
.header {
display: block;
width: 80%;
height: 1020px;
margin: auto;
color: white;
}
.container {
width: 1440px;
}
.navbar {
padding-top: 20px;
}
.navbar a {
color: black;
text-decoration: none;
}
.logo {
float: left !important;
}
.navlink {
float: right;
}
.navlink li {
float: left;
margin-left: 100px;
list-style: none;
}
.hero-text {
margin-top: 100px;
float: left !important;
}
.hero-text h1 {
font-size: 75px;
font-weight: 900;
}
.hero-text h2 {
font-size: 40px;
font-weight: 300;
}
.hero-text p {
margin-top: 100px;
font-size: 22px;
font-weight: 300;
}
<!-- slick slider-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<div class="slid">
<div class="slider3">
<div class="cc">
<div class="some">
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<h3>B2B DESIGN</h3>
</div>
<div class="navlink">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="container hero-text">
<h1>Unlimited Lorem for <br>unlimited ipsume</h1>
<h2>& Fusce feugiat congue ipsum</h2>
<p>Ut vel orci sem. Morbi quis diam ac ligula ultricies <br>Ut eget massa ornare, porta elit quis, porttitor leo. Nulla facilisi. </p>
</div>
</div>
<!-- container -->
</div>
<!-- end header -->
</div>
<!-- some-->
<div class="slider-for">
<div>
<img class="banner-img" src="https://pbs.twimg.com/media/En-d0nPWMAIXYQk.jpg:large" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://sepidehirvani.com/wp-content/uploads/2017/04/green-nature-dual-monitor-other-1-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://tz-mag-media.s3.ap-southeast-1.amazonaws.com/wp-content/uploads/2018/02/26144641/image101.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://i.pinimg.com/originals/91/24/0f/91240f62852bedc0f49d344389ae7097.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://journeysbydesign.com/wp-content/uploads/2018/01/cropBalade_en_pirogue_canoe-rambling_Iharana-Bush-Camp-1-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://journeysbydesign.com/wp-content/uploads/2017/01/1_K30D454AF2827C_44-1-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://bokun.s3.amazonaws.com/d397bd70-f43c-4b8f-a04a-feff5ab3ddf9.jpeg?w=247&h=200&fit=crop" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://i1.wp.com/www.climatechangetheatreaction.com/wp-content/uploads/2019/10/b40a592b47cea301d5e70906d4a86562-e1570158663199.jpg?resize=2000%2C1024" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://journeysbydesign.com/wp-content/uploads/2017/02/cropBat-Forest_BBC-Hide_Aerial.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://journeysbydesign.com/wp-content/uploads/2018/01/cropMasoala_Wildlife_HR11-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://s3.eu-west-2.amazonaws.com/tourhound/tours/3726999a-490b-476b-9722-e56a839613f6/crop2016-GP-ODL-ALH-220-2000x1024.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://wineandcountrylife.com/wp-content/uploads/2019/08/PoolhouseINT_wide-5239_originalLead.jpg" loading="lazy">
</div>
<div>
<img class="banner-img" src="https://www.danacommunications.com/wp-content/uploads/2015/10/kigr-lrg.jpg" loading="lazy">
</div>
</div>
<!-- slider-for -->
</div>
<div class="thumbnails">
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://pbs.twimg.com/media/En-d0nPWMAIXYQk.jpg:large" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://sepidehirvani.com/wp-content/uploads/2017/04/green-nature-dual-monitor-other-1-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://i.pinimg.com/originals/91/24/0f/91240f62852bedc0f49d344389ae7097.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://journeysbydesign.com/wp-content/uploads/2018/01/cropBalade_en_pirogue_canoe-rambling_Iharana-Bush-Camp-1-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://journeysbydesign.com/wp-content/uploads/2017/01/1_K30D454AF2827C_44-1-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://bokun.s3.amazonaws.com/d397bd70-f43c-4b8f-a04a-feff5ab3ddf9.jpeg?w=247&h=200&fit=crop" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://i1.wp.com/www.climatechangetheatreaction.com/wp-content/uploads/2019/10/b40a592b47cea301d5e70906d4a86562-e1570158663199.jpg?resize=2000%2C1024" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://journeysbydesign.com/wp-content/uploads/2017/02/cropBat-Forest_BBC-Hide_Aerial.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://journeysbydesign.com/wp-content/uploads/2018/01/cropMasoala_Wildlife_HR11-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://s3.eu-west-2.amazonaws.com/tourhound/tours/3726999a-490b-476b-9722-e56a839613f6/crop2016-GP-ODL-ALH-220-2000x1024.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://wineandcountrylife.com/wp-content/uploads/2019/08/PoolhouseINT_wide-5239_originalLead.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://www.danacommunications.com/wp-content/uploads/2015/10/kigr-lrg.jpg" loading="lazy" width="210" height="224">
</div>
<div class="thumbnail-wraps">
<img class="thumbnail-img" src="https://www.danacommunications.com/wp-content/uploads/2015/10/kigr-lrg.jpg" loading="lazy" width="210" height="224">
</div>
</div>
<!-- thumbnails -->
</div>
<!-- slider 3-->
</div>
<!--slid-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

In a way, it's already working, though it's an image tag and not a background.
The problem is because the header (cf. .some) is in front of your carrousel. You end up not being able to click on the elements, so if you remove the z-index rule from:
.some {
/* z-index: 9999; */
position: absolute;
}
It'll work as expected.
However, you'll have to remake your HTML structure to get both your texts and the functionality. Or at least change some CSS rules, but it can end to get pretty hacky.

How to make the isotope layout with flat bottom?

I'm using isotope js https://isotope.metafizzy.co/ and can't understand how to make my layout with flat bottom as here https://diefinnhutte.qodeinteractive.com/masonry-portfolio/.
I can't set fixed height for my blocks, but in example above I think isotope giving its own height.
How to make it?
I have simple code:
<div class="grid">
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
</div>
My css:
.grid-item {width: 33%}
and js:
$('.grid').isotope({
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true,
});
Inside grid-items I have img and they can be different height, so what should I do?
Thanks in advance!

Isotope is great for creating these layouts, but it has some quirks to work with. In your case you are working with images, and those images could dictate how the layout is calculated. I'd advise you to use the imagesLoaded library from the same author to first check if the images are loaded and then render the layout. Otherwise the items in the masonry layout would not have any height before the images are loaded.
If you want to have a layout that is flat on the top and on the bottom then you'll need some fixed height values. If the intact ratio of the images is more important than the height then it will simply not be possible.
You can use the object-fit property in CSS to give images a background-size: cover type of effect. It will make sure that any given image will be covering the entire space of an item in the masonry grid.
In these examples I've used multiple differently sized images that all work as they should despite their differences.
Check out the snippet with Isotope and imagesLoaded here below.
var $grid = $('.grid').imagesLoaded( function() {
$grid.isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-item',
}
});
});
*, *::before, *::after {
box-sizing: border-box;
}
.grid-item {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 33.3333333%;
height: auto;
}
.grid-item.is-wide {
width: 66.6666666%;
}
.grid-item::before {
content: "";
grid-area: 1 / 1 / 2 / 2;
display: block;
}
.grid-item::before,
.grid-item.is-wide.is-high::before {
padding-top: 100%;
}
.grid-item.is-wide::before {
padding-top: 50%;
}
.grid-item.is-high::before {
padding-top: 200%;
}
.grid-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 5px;
-o-object-fit: cover;
object-fit: cover;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<div class="grid">
<div class="grid-item">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/360/640" alt="360x640"/>
</div>
<div class="grid-item is-high">
<img src="https://www.fillmurray.com/420/420" alt="420x420"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item ">
<img src="https://www.fillmurray.com/640/800" alt="640x800"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/480/320" alt="640x360"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/360/640" alt="360x640"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/420/420" alt="420x420"/>
</div>
<div class="grid-item is-high">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/640/800" alt="640x800"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/480/320" alt="640x360"/>
</div>
</div>

Image is stretched when place into carousal

I am using a carousel where I put 5 images with different height and width but there are some issues with images, some images are stretched some images are the center of the carousel.
I want that all images fit inside the carousel.
Here is my code :
<div uib-carousel active="active" class="filter-carousel" interval="false" no-wrap="noWrapSlides" ng-if="vm.temp.length">
<div uib-slide ng-repeat="img in vm.temp" index="$index">
<img ng-src="{{img.src}}" height="650">
</div>

You can use the "background-image" attribute of the div tag. And set the "background-size" attribute to contain or cover. Eg :
.owl-carousel .item img
{
display: none;
}
.owl-carousel .item img + div
{
display: block;
width: 100%;
height: 210px; /* option */
background-repeat: no-repeat;
background-position: center center; /* 0 0 */
background-size: contain; /* or cover */
}
<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
<div class="item">
<img src="http://example.com/" alt="" />
<div style="background-image:url('http://example.com/')"></div>
</div>
</div>

You can use the object-fit property in CSS to define how an image should fit into a container. You can use fill, contain, cover, none or scale down.
.the-carousel img {
object-fit: cover;
}

How to create a grid of photos where you can hover them and they will change into other photos?

I'm trying to create a grid of photos where you can hover over them and they will change into other images. I've tried placing the image on CSS as background image but when you hover, the other picture doesn't seem to be exactly the same size (when it actually is).
I also tried using two images method (one on top of the other) and it works well with only one image on the page but with a grid of images, it doesn't work because of the position: absolute.
The only way that I found that "sort of" works is by replacing one image for the other but then you don't have a smooth transition (fade into another image).
Here is the access to code pen (seems to work better):
Code:
css:
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/>
<!-- trying to use hover to change images
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> -->
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 right">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</section>
</body>

I am not sure if this is what you were looking for.
.row {
display: flex;
flex-direction: row;
}
.flex-item {
min-width: 200px;
min-height: 200px;
}
.hover-img {
transition: background-image 1s ease-in-out;
background-size: cover;
}
.img-1 {
background-image: url(https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg);
width: 400px;
/*
height: 200px;*/
flex-grow: 2;
}
.img-1:hover {
background-image: url(http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg);
}
.img-2 {
background-image: url(http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg);
/* width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-2:hover {
background-image: url(http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif);
}
.img-3 {
background-image: url(http://donsmaps.com/clickphotos/dolnivi200x100.jpg);
/*width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-3:hover {
background-image: url(http://markcarson.com/images/SunBird-7-200x200.png);
}
.img-4 {
/*max-width:400px;*/
flex-grow: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<section class="container pages-content">
<div class="row">
<div class="flex-item hover-img img-1"></div>
<div class="flex-item hover-img img-2"></div>
<div class="flex-item hover-img img-3"></div>
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" class="flex-item img-4" />
</div>
</section>
</body>

Ok so I have been playing around with your problem for a bit. I came up with this solution: http://codepen.io/anon/pen/Rpwewg. It appears to be working the way you want it. I ran into two issues figuring it out.
The first one was that you are using the position: absolute on the images. it will place the image relative to the closest parent that is relatively positioned. Since in your example the parent div was a bootstrap class I decided to create a new div with position: relative assigned to it and gave it a class of images-wrapper.
Now I just needed to overlap the images over each other, just as you did in the example. But...If I make both images position: absolute the browser won't have an height assigned to the images-wrapper class. Therefore I decided to give one of the images a relative position and the other one absolute so it would overlap.
hope it helps :).
html
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<!--img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/-->
<!-- trying to use hover to change images-->
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> <!---->
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/>
</div>
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</body>
css
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
z-index: 10;
opacity: 1;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
z-index: 9;
opacity: 1;
position: relative;
}
.images-wrapper{
position: relative;
}

The best way to achieve this is to set the images as background and hover background, then set background-size:cover to keep the image display "uniform" in size. No need for Javascript code at all.
Here, I forked your Codepen for a demo. I only applied the hover effect to the first image for you to check out. Let me know if it helps.
For the "smooth transition", CSS also takes care of it for you. Feel free to change the div width (and height) to serve your needs better:
div.row div {
cursor: pointer;
transition: ease 0.5s all;
}
div.row .col-md-12:first-child {
background-image: url('https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg');
background-size: cover;
height: 200px;
margin-bottom: 10px;
}
div.row .col-md-12:first-child:hover {
background-image: url('http://donsmaps.com/clickphotos/dolnivi200x100.jpg');
}

Keeping image aspect ratio in a division

I have a division with n-number of divs which consist of images of different sizes:
<div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<div> <img ng-src="{{backgroundImage}}" /> </div>
<!-- dynamically the images will be loaded -->
</div>
The functionality I am looking for is:
They have to flow in one row regardless of the number of images, which means they should re-size to smaller images if there is a large number of images.
The images aspect ratio has to be kept on re-sizing
The div should be all equal width and height on re-sizing
What I'd actually like is for each image to be aligned within a square that is consistently sized with all of the other images. Each image should be constrained and re-sized within their own square. Then I want all of the containing squares to be sized across the row. So as the number of images increases the size of the squares decrease accordingly.
I have tried and searched a lot for the solution, but nothing worked. Please demonstrate some real examples with the functionality I mentioned above.

I'd prefer using pure css and html, something like this:
<div class="ratio-16-9">
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View">
</div>
<style>
.ratio-16-9,
.ratio-12-9,
.ratio-1-1 {
display: block;
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
}
.ratio-16-9 img,
.ratio-12-9 img,
.ratio-1-1 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.ratio-1-1 {
padding-bottom: 100%;
}
.ratio-12-9 {
padding-bottom: 73.47%;
}
</style>

You can try something like this, although it requires an additional div:
* {
margin: 0;
padding: 0;
}
.outer-wrap-img {
display: table;
table-layout: fixed;
width: 100%;
}
.inner-wrap-img {
display: table-cell;
}
.inner-wrap-img div {
padding-bottom: 100%;
position: relative;
}
.inner-wrap-img div img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
}
.red {
background: #F00;
}
.green {
background: #0f0;
}
<div class="outer-wrap-img">
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="red">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</div>
</div>
<div class="inner-wrap-img">
<div class="green">
<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
</div>
</div>
</div>

This should fulfill your requirement. set the total no. of image to variable imageCount and the code will calculate accordingly. Right now i have given background red. You can set image url when you use
var imageCount = 27;
var width = window.innerWidth;
var divWidth = width/imageCount;
var html = "";
for(var i=0;i<imageCount;i++)
{
html+= "<div style='float:left; width: "+divWidth +"px;height: "+divWidth +"px;background: red; background-size:100% 100%'></div>";
}
document.getElementById("images").innerHTML = html;
*{
padding: 0;
margin: 0;
}
<div id="images">
</div>

Use flexbox, or, you can use a table.