html - Text hovering photo is not scaling, what to do? -
i want excuse not flagging last post... did not consider it... hope 1 not need ;)
i still got same problem...
i had problem. have built simple gallery, images size depend on device resolution , hover effect shows detail information hovered photo. images scaling perfectly, had problem texts covering photos, not.
to change it, used @media, after hover text scaling established resolutions. question do, have text scaling down photo, when user change window browser size custom?
<section id="gallery"> <ul class="large-block-grid-3 medium-block-grid-2 small-block-grid-1"> <li> <div class="overlay"></div> <a href="#"></a> <img src="http://fkdesign.pl/zurb/files/img_08.jpg" alt="ocean" /> <div class="gallery-info"> <ul> <li> <h1 class="text-center"><a href="#" title="title">two grils , 1 cup drinking togheter</a></h1> </li> <li> <dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="dislike video"></span></dt> <dd><span class="value">422</span> </dd> <dd><span class="name">likes</span> </dd> </dl> <div class="small-4 columns text-center"> <img src="http://fkdesign.pl/zurb/img/sep.png" alt="" /> </div> <dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt> <dd><span class="value">323</span> </dd> <dd><span class="name">views</span> </dd> </dl> </li> </ul> </div> </li> <li> <div class="overlay"></div> <a href="#"></a> <img src="http://fkdesign.pl/zurb/files/img_02.jpg" alt="ocean" /> <div class="gallery-info"> <ul> <li> <h1 class="text-center"><a href="#" title="title">two grils , 1 cup drinking togheter</a></h1> </li> <li> <dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="dislike video"></span></dt> <dd><span class="value">422</span> </dd> <dd><span class="name">likes</span> </dd> </dl> <div class="small-4 columns text-center"> <img src="http://fkdesign.pl/zurb/img/sep.png" alt="" /> </div> <dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt> <dd><span class="value">323</span> </dd> <dd><span class="name">views</span> </dd> </dl> </li> </ul> </div> </li> <li> <div class="overlay"></div> <a href="#"></a> <img src="http://fkdesign.pl/zurb/files/img_03.jpg" alt="ocean" /> <div class="gallery-info"> <ul> <li> <h1 class="text-center"><a href="#" title="title">two grils , 1 cup drinking togheter</a></h1> </li> <li> <dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="dislike video"></span></dt> <dd><span class="value">422</span> </dd> <dd><span class="name">likes</span> </dd> </dl> <div class="small-4 columns text-center"> <img src="http://fkdesign.pl/zurb/img/sep.png" alt="" /> </div> <dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt> <dd><span class="value">323</span> </dd> <dd><span class="name">views</span> </dd> </dl> </li> </ul> </div> </li> <li> <div class="overlay"></div> <a href="#"></a> <img src="http://fkdesign.pl/zurb/files/img_04.jpg" alt="ocean" /> <div class="gallery-info"> <ul> <li> <h1 class="text-center"><a href="#" title="title">two grils , 1 cup drinking togheter</a></h1> </li> <li> <dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="dislike video"></span></dt> <dd><span class="value">422</span> </dd> <dd><span class="name">likes</span> </dd> </dl> <div class="small-4 columns text-center"> <img src="http://fkdesign.pl/zurb/img/sep.png" alt="" /> </div> <dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt> <dd><span class="value">323</span> </dd> <dd><span class="name">views</span> </dd> </dl> </li> </ul> </div> </li> <li> <div class="overlay"></div> <a href="#"></a> <img src="http://fkdesign.pl/zurb/files/img_05.jpg" alt="ocean" /> <div class="gallery-info"> <ul> <li> <h1 class="text-center"><a href="#" title="title">two grils , 1 cup drinking togheter</a></h1> </li> <li> <dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="dislike video"></span></dt> <dd><span class="value">422</span> </dd> <dd><span class="name">likes</span> </dd> </dl> <div class="small-4 columns text-center"> <img src="http://fkdesign.pl/zurb/img/sep.png" alt="" /> </div> <dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt> <dd><span class="value">323</span> </dd> <dd><span class="name">views</span> </dd> </dl> </li> </ul> </div> </li> <li> <div class="overlay"></div> <a href="#"></a> <img src="http://fkdesign.pl/zurb/files/img_06.jpg" alt="ocean" /> <div class="gallery-info"> <ul> <li> <h1 class="text-center"><a href="#" title="title">two grils , 1 cup drinking togheter</a></h1> </li> <li> <dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="dislike video"></span></dt> <dd><span class="value">422</span> </dd> <dd><span class="name">likes</span> </dd> </dl> <div class="small-4 columns text-center"> <img src="http://fkdesign.pl/zurb/img/sep.png" alt="" /> </div> <dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt> <dd><span class="value">323</span> </dd> <dd><span class="name">views</span> </dd> </dl> </li> </ul> </div> </li> <li> <div class="overlay"></div> <a href="#"></a> <img src="http://fkdesign.pl/zurb/files/img_07.jpg" alt="ocean" /> <div class="gallery-info"> <ul> <li> <h1 class="text-center"><a href="#" title="title">two grils , 1 cup drinking togheter</a></h1> </li> <li> <dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="dislike video"></span></dt> <dd><span class="value">422</span> </dd> <dd><span class="name">likes</span> </dd> </dl> <div class="small-4 columns text-center"> <img src="http://fkdesign.pl/zurb/img/sep.png" alt="" /> </div> <dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt> <dd><span class="value">323</span> </dd> <dd><span class="name">views</span> </dd> </dl> </li> </ul> </div> </li> <li> <div class="overlay"></div> <a href="#"></a> <img src="http://fkdesign.pl/zurb/files/img_08.jpg" alt="ocean" /> <div class="gallery-info"> <ul> <li> <h1 class="text-center"><a href="#" title="title">two grils , 1 cup drinking togheter</a></h1> </li> <li> <dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="dislike video"></span></dt> <dd><span class="value">422</span> </dd> <dd><span class="name">likes</span> </dd> </dl> <div class="small-4 columns text-center"> <img src="http://fkdesign.pl/zurb/img/sep.png" alt="" /> </div> <dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt> <dd><span class="value">323</span> </dd> <dd><span class="name">views</span> </dd> </dl> </li> </ul> </div> </li> <li> <div class="overlay"></div> <a href="#"></a> <img src="http://fkdesign.pl/zurb/files/img_09.jpg" alt="ocean" /> <div class="gallery-info"> <ul> <li> <h1 class="text-center"><a href="#" title="title">two grils , 1 cup drinking togheter</a></h1> </li> <li> <dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="dislike video"></span></dt> <dd><span class="value">422</span> </dd> <dd><span class="name">likes</span> </dd> </dl> <div class="small-4 columns text-center"> <img src="http://fkdesign.pl/zurb/img/sep.png" alt="" /> </div> <dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt> <dd><span class="value">323</span> </dd> <dd><span class="name">views</span> </dd> </dl> </li> </ul> </div> </li> <li> <div class="overlay"></div> <a href="#"></a> <img src="http://fkdesign.pl/zurb/files/img_10.jpg" alt="ocean" /> <div class="gallery-info"> <ul> <li> <h1 class="text-center"><a href="#" title="title">two grils , 1 cup drinking togheter</a></h1> </li> <li> <dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="dislike video"></span></dt> <dd><span class="value">422</span> </dd> <dd><span class="name">likes</span> </dd> </dl> <div class="small-4 columns text-center"> <img src="http://fkdesign.pl/zurb/img/sep.png" alt="" /> </div> <dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt> <dd><span class="value">323</span> </dd> <dd><span class="name">views</span> </dd> </dl> </li> </ul> </div> </li> <li> <div class="overlay"></div> <a href="#"></a> <img src="http://fkdesign.pl/zurb/files/img_11.jpg" alt="ocean" /> <div class="gallery-info"> <ul> <li> <h1 class="text-center"><a href="#" title="title">two grils , 1 cup drinking togheter</a></h1> </li> <li> <dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="dislike video"></span></dt> <dd><span class="value">422</span> </dd> <dd><span class="name">likes</span> </dd> </dl> <div class="small-4 columns text-center"> <img src="http://fkdesign.pl/zurb/img/sep.png" alt="" /> </div> <dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt> <dd><span class="value">323</span> </dd> <dd><span class="name">views</span> </dd> </dl> </li> </ul> </div> </li> <li> <div class="overlay"></div> <a href="#"></a> <img src="http://fkdesign.pl/zurb/files/img_12.jpg" alt="ocean" /> <div class="gallery-info"> <ul> <li> <h1 class="text-center"><a href="#" title="title">two grils , 1 cup drinking togheter</a></h1> </li> <li> <dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="dislike video"></span></dt> <dd><span class="value">422</span> </dd> <dd><span class="name">likes</span> </dd> </dl> <div class="small-4 columns text-center"> <img src="http://fkdesign.pl/zurb/img/sep.png" alt="" /> </div> <dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt> <dd><span class="value">323</span> </dd> <dd><span class="name">views</span> </dd> </dl> </li> </ul> </div> </li> </ul> </section>
the following direction , solution problem:
i bet want similar paravel's fittext jquery plugin. need run jquery run it.
instead of complete code example, leave solution direction , space explore first can learn in long run.
Comments
Post a Comment