Bootstrap Snippet zoom caroussel using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="flex-container">
  <div class="items">
    <img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIsnZBBXdhpf1_qCVu08sQh95unQ65UTabUs5QoLivkAcaj7PVFA" alt="" />
    <img class="image" src="http://netflixlife.com/files/2015/05/inglourious-basterds-.jpg" alt="" />
    <img class="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRjyD_W97_8VCTAqkGE1NX56S8d5783fKhT_-Q9wpDXR7HVsOjODQ" alt="" />
    <img class="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTB83A4eeAEgcHIH0WBRcEcYoYWCRtbZ9rId1ZZHrLv6OoYoRIC4A" alt="" />
    <img class="image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS7_0toJHp2ECSTtR2LxUOK5r9MMnwJTIG0VcKquihFQmNT411UJw" alt="" />
    <img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQx5ZGvxU1Kw3dgjV-Vxi_u4DtoUy-qtn1bcmbeNbjBPnqLvxzqug" alt="" />
    <img class="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRglxVWeeh8xfNIRM6nN6cDoaRfpSx8158MWzb7n2e9vnJKq_P6" alt="" />
    <img class="image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQlGi1Z9Muxvxz2WyRaAfKbmVYCn3nH0vvaw_LU5pyvfMxVAmNB" alt="" />
    <img class="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT3qP9OlkP6TaWRtO-RAj7J3JjFM9a8iJBtEcPWnXLbjXlWZrpB" alt="" />
    <img class="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTJAyk3csTXu1Oe7el5m2NnlKHxxXuq1GKCIJuBecpUMv75qnWpVg" alt="" />
    <img class="image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTQFSuckpbQWSw1JYryscwhYXt9L-PYN6sxl2Jds3MYe3HGwOgZ" alt="" />
    <img class="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS-MSs0i-X3IwGu8gkgt-L5iUJe3XDY2lnBfS7hccIu_svK86e1" alt="" />
    <img class="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS3mdPQMucEN9P6L7xDfxZo_ARDmNQWo4L95OwXEE_xf7mcfUVW" alt="" />
  </div>
  <div id="left" class="button-overlay left">◀</div>
  <div id="right" class="button-overlay right">▶</div>
</div>
<script>
    $("#right").click(function() {
  var currentLeft = parseInt($('.items').css('left'));
  $('.items').css('left', (currentLeft - 800) + 'px');
})
$('#left').click(function() {
  var currentLeft = parseInt($('.items').css('left'));
  $('.items').css('left', (currentLeft + 800) + 'px');
})
</script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
  background-color: #141414;
}
.flex-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  margin-top: 10%;
  max-width: 10000px;
}
.image {
  height: 120px;
  width: 200px;
  padding: 3px;
  transition: .3s;
  transition-timing-function: ease-in-out;
}
.items {
  justify-content: center;
  display: flex;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  transition: left .5s;
  transition-timing-function: ease-in-out;
  position: fixed;
}
.image:hover {
  height: 220px;
  width: 350px;
  transition: .3s;
  transition-timing-function: ease-in-out;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"zoom caroussel"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"zoom caroussel" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"zoom caroussel"
Bootstrap 3.0.0 Snippet by evarevirus