0

I was working with carosel in bootstrap and I want background image to be blur and top image to be properly visible. For this I was using two classes in style but as a result both front and back images are coming blur. The fiddle for the same is here https://jsfiddle.net/v37wju8h/6/ . Please increase the screen size to check the problem with the result. Below is the code -

<div class="container">
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">   <!-- Wrapper for slides -->
            <div class="item active back_img" style="background-image:url('http://www.pluots.net/media/full/18/dining-table-contemporary-in-wood-home-fred-by-vladimir-dining-table-contemporary-in-wood-home-fred-by-vladimir.jpg');">
                <img class="front_img" src="http://www.pluots.net/media/full/18/furniture-tips-to-make-marvellous-round-dining-table-furniture-tips-to-make-marvellous-round-dining-table.jpg"/>
                <div class="carousel-caption">
                    <h3>Image1</h3>
                </div>
            </div>
            <div class="item back_img" style="background-image:url('http://www.pluots.net/media/full/18/dining-table-contemporary-in-wood-home-fred-by-vladimir-dining-table-contemporary-in-wood-home-fred-by-vladimir.jpg');">
                <img class="front_img" src="http://www.pluots.net/media/full/18/furniture-tips-to-make-marvellous-round-dining-table-furniture-tips-to-make-marvellous-round-dining-table.jpg" />
                <div class="carousel-caption">
                    <h3>Image2 </h3>
                </div>
            </div>
            <div class="item back_img" style="background-image:url('http://www.pluots.net/media/full/18/dining-table-contemporary-in-wood-home-fred-by-vladimir-dining-table-contemporary-in-wood-home-fred-by-vladimir.jpg');">
                <img class="front_img" src="http://www.pluots.net/media/full/18/furniture-tips-to-make-marvellous-round-dining-table-furniture-tips-to-make-marvellous-round-dining-table.jpg" />
                <div class="carousel-caption">
                    <h3>Image 3</h3>
                </div>
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#carousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div> 
</div>
Thomas Bormans
  • 5,156
  • 6
  • 34
  • 51
Harshit
  • 109
  • 5
  • 19

1 Answers1

0

You can use opacity

opacity: 0.5
position: relative;
mable george
  • 223
  • 2
  • 8