Twitter Bootstrap Question posted in

Placing images in a twitter bootstrap's grid

Need to place images kinda like here (for example): http://imgur.com/QpRjvpW
Original pictures of different sizes.
Hover effect – blur and fogging effects and text on the middle of the picture.
Here is what I got for now: JSFiddle

So the question, how correctly position them, so that they occupy the entire width of the screen by 3 in a row, gonna be same size, closely adhering to the upper and lower div and to each other, don’t expand within its borders? And the effect of the blur doesn’t touch neighboring elements?

Tags:

2

Answers


  1. 0

    Apply this css, you’ll get the look like the example —

    .works img{
    display:block;
    max-width:100%;
}

.works [class^="col-"] {
    padding-left:0;
    padding-right:0;
}

.works .text{
    position:absolute !important;
    left: 0;
    right: 0;
}
    Login or Signup to reply.
  2. 0

    Remove class row and col-lg-12,use col-sm-12 like

    <div class="col-sm-12">
                <div id="work1" class="col-sm-4">
                    <img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03257/POTD-SKY-SQUIRREL_3257854k.jpg">
                    <p class="text">ONE</p>
                </div>
                <div id="work2" class="col-sm-4">
                    <img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg">
                    <p class="text">TWO</p>
                </div>
                <div id="work3" class="col-sm-4">
                    <img class="image" src="http://s.hswstatic.com/gif/dolphin-pictures-1.jpg">
                    <p class="text">THREE</p>
                </div>
            </div>

    CSS:

    works img {
    height: 600px;
    width: 100%;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search