<div class="row"> <div class="container-a1"> <ul class="caption-style-1"> <li class="col-lg-3 col-sm-3 portfolio-item"> <img class="img-responsive" src="img/1.png" alt=""> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h1>amazing caption</h1> <p>whatever - awesome</p> </div> </div> </li> <li class="col-lg-3 col-sm-3 portfolio-item"> <img class="img-responsive" src="img/1.png" alt=""> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h1>amazing caption</h1> <p>whatever - awesome</p> </div> </div> </li> <li class="col-lg-3 col-sm-3 portfolio-item"> <img class="img-responsive" src="img/1.png" alt=""> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h1>amazing caption</h1> <p>whatever - awesome</p> </div> </div> </li> <li class="col-lg-3 col-sm-3 portfolio-item"> <img class="img-responsive" src="img/1.png" alt=""> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h1>amazing caption</h1> <p>whatever - awesome</p> </div> </div> </li> </ul> </div> </div> <style> .portfolio-item {margin:0; padding:0;} .caption-style-1{ list-style-type: none; margin: 0px; padding: 0px; } .caption-style-1 li{ float: left; padding: 0px; position: relative; overflow: hidden; } .caption-style-1 li:hover .caption{ opacity: 1; } .caption-style-1 img{ margin: 0px; padding: 0px; float: left; z-index: 4; } .caption-style-1 .caption{ cursor: pointer; position: absolute; opacity: 0; -webkit-transition:all 0.45s ease-in-out; -moz-transition:all 0.45s ease-in-out; -o-transition:all 0.45s ease-in-out; -ms-transition:all 0.45s ease-in-out; transition:all 0.45s ease-in-out; } .caption-style-1 .blur{ background-color: rgba(0,0,0,0.65); height: 175px; width: 292px; z-index: 5; position: absolute; } .caption-style-1 .caption-text h1{ text-transform: uppercase; font-size: 24px; } .caption-style-1 .caption-text{ z-index: 10; color: #fff; position: absolute; width: 293px; height: 176px; text-align: center; } </style> i converted tutorial hover caption on bootstrap. problem grid style portfolio responsive , can't seem caption responsive. tried setting height , width 100% did not work? tips?
velibor nikolic hi there.
usingdiv in ul > li not idea.
have @ link here.
try doing looking caption. have @ fiddle working sample.
this responsive, both image , caption.
use bootstrap class of col-xs-12 width , caption class uses height:100% .
i reduced someclasses , added shaded background caption class, blur class not needed.
here sample of 1 image block caption.
<div class="col-sm-4 col-xs-12 clear-l-r"> <img src="http://lorempixel.com/640/640/nature" class="img-responsive clear-l-r" alt=""> <div class="col-xs-12 caption caption-text"> <h1>amazing caption</h1> <p>whatever - awesome</p> </div> </div> 
Comments
Post a Comment