Bootstrap Snippet Focal Point Responsive-Images 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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="container">
    
    <div class="column">
      <h1>Focal Point</h1>
      <p>right-3 up-3</p>
     
      <div class="focal-point right-3 up-3">
        <div><img src="http://designshack.net/tutorialexamples/focalpoint/guy.jpg" alt="guy"></div>
      </div>
    </div>
     
    <div class="column">
      <h1>Focal Point</h1>
      <p>right-2 up-2</p>
     
      <div class="focal-point right-3 up-3">
        <div><img src="http://designshack.net/tutorialexamples/focalpoint/couple.jpg" alt="couple"></div>
      </div>
    </div>    
    
</div>
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
/*! 
 *  Focal Point: Pure HTML/CSS Adaptive Images Framework
 *  Author: Adam Bradley, 2012
 *  License: MIT/GPLv2
 *  https://github.com/adamdbradley/focal-point
 *  http://www.cdnconnect.com/
*/
.focal-point {
    width: 100%;
    height: auto;
    overflow: hidden;
}
.focal-point img {
    width: 100%;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;
}
.focal-point div {
    position: relative; 
    max-width: none; 
    height: auto;
}
@media all and (max-width: 767px) {
    /* 4x3 Landscape Shape (Default) */
    .focal-point div {
        margin: -3em -4em;
    }
    /* Landscape down (Total 6em) */
    .down-1 div {
        margin-top:    -3.5em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Focal Point Responsive-Images"
Bootstrap 3.2.0 Snippet by sdcarte

Related: See More

Questions / Comments:

"Focal Point Responsive-Images" Bootstrap 3.2.0 Snippet by sdcarte

Related: See More

Questions / Comments:

"Focal Point Responsive-Images"
Bootstrap 3.2.0 Snippet by sdcarte