html - Translate with CSS to the top of a div -


i have 3 boxes within fluid container.

each box has heading title, icon , text below.

on :hover want icon move top of <div> , change it's size, have managed "achieve" using number of pixels.

that not work in mobile resolutions if title text longer , takes 2 lines.

here have done far:

fiddle here

html

<div class="container"> <div class="row">     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollin">         <div class="service-box">             <h2>title</h2>             <i class="fa fa-5x fa-paper-plane wow bouncein market-icon" data-wow-delay=".1s"></i>             <p class="">certain text below icon</p>         </div>     </div> </div>

css

.container{     text-align:center; }  .market-blocks{     background: #3aa0d1;     padding: 30px 0 30px 0;     cursor:pointer; }  .orange{   background: #e97d68; }  i.market-icon {     -webkit-transition: 1s ease-in;     -moz-transition: 1s ease-in;     -o-transition: 1s ease-in;     transition: 1s ease-in }  .market-blocks:hover i.market-icon {     -webkit-transform: translate(0,-70px);     -moz-transform: translate(0,-70px);     -o-transform: translate(0,-70px);     -ms-transform: translate(0,-70px);     transform: translate(0,-70px);     font-size: 1.8em; }

how can it? , there better way movement initial position top of <div>?

pure html/css solution:

.container {      text-align: center;  }    .market-blocks {  	background: #3aa0d1;  	padding: 30px 0;  	cursor: pointer;  }    .orange {      background: #e97d68;  }    .service-box {      display: inline-block;  }    .service-box-header {      position: relative;  }    .market-title {      padding-bottom: 5em;      -webkit-transition: 1s ease-in;      transition: 1s ease-in  }    .market-icon {      position: absolute;      right: 0;      bottom: 0;      left: 0;      -webkit-transition: 1s ease-in;      transition: 1s ease-in  }        .market-blocks:hover .market-title {          padding-bottom: 0;      }        .market-blocks:hover .market-icon {          bottom: 100%;          font-size: 1.8em;      }
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>  <div class="container">      <div class="row">          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollin">              <div class="service-box">                  <div class="service-box-header">                      <h2 class="market-title">very-very-very-very-very-very-very-very loooooooooooooooooooong title</h2>                      <i class="fa fa-5x fa-paper-plane wow bouncein market-icon"></i>                  </div>                  <p class="">certain text below icon</p>              </div>          </div>      </div>  </div>


Comments

Post a Comment

Popular posts from this blog

javascript - Bootstrap Popover: iOS Safari strange behaviour -

i looking through twitter bootstrap documentation, , i'm interested in implementing dismissible popover when button clicked. here example bootstrap's docs: http://getbootstrap.com/javascript/#dismiss-on-next-click when press "dismissible popover" button os x safari browser works fine. when access same link above ios safari, button not work. is, popover not dismissed on click. why button not working ios safari? the example linked using data-trigger="focus" attribute. try changing data-trigger="click" . <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="click" title="dismissible popover" data-content="and here's amazing content. it's engaging. right?">dismissible popover</a>
Read more

Website Login Issue developed in magento -

i have website developed using magento . able login. right now, login failed. infact operations interacts user table failing. need know issue. how figure out? first clear try clear log file second make sure have not upgraded magento and 3rd make sure db accessible in magento -harry p
Read more

Can the constants be defined inside a model file of a framework in PHP? -

i'm using phpfox framework. i've define 2 constants used 2 functions present within model class file. can define constants @ beginning of model class file or cause issue or against coding standards? please me in regard. following 1 method model class file. i want write following code : <?php /** * [phpfox_header] */ /*header('content-type: text/event-stream'); header('cache-control: no-cache');*/ defined('phpfox') or exit('no dice!'); /** * * * @copyright [phpfox_copyright] * @author raymond benc * @package phpfox_service * @version $id: service.class.php 67 2009-01-20 11:32:45z raymond_benc $ */ class notification_service_process extends phpfox_service { /** * class constructor */ public function __construct() { $this->_stable = phpfox::gett('notification'); } public function add($stype, $iitemid, $iowneruserid, $isenderuserid = null) ...
Read more