javascript - Align H2 vertically, inside of the dynamically sized DIV -

-

i need aligning h2 inside of masonryjs blocks - vertically , horizontally, each block has dynamic width/height, (whatever image size is). there hover state h2 tag.

i have tried many different approaches, none seem work.

any 1 has idea whats cleanest way around this?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script>  <script type="text/javascript"> $(document).ready( function() {    $('.grid').masonry({     itemselector: '.grid-item',     columnwidth: 160   });  }); </script> <style type="text/css"> * {   -webkit-box-sizing: border-box;           box-sizing: border-box; }  body { font-family: sans-serif; }  /* ---- grid ---- */  .grid {   background: #fff;   width: 90%;   max-width: 1200px;   margin: 0 auto; }  /* clearfix */ .grid:after {   content: '';   display: block;   clear: both; }  /* ---- grid-item ---- */  .grid-item {   /* width: 49%; */   float: left;   background: #ccc;   margin: 5px;   position: relative;   text-align: center; }  h2.img-title {   display: block;   height: 100%;   margin-bottom: 0;   margin-top: 0;   position: absolute;   top: 0;   width: 100%;   background: rgba(255,255,255,0.7);   opacity: 0; }  .grid-item:hover h2.img-title {   opacity: 1; }  </style>    <div class="grid">    <div class="grid-item">     <img src="https://s-media-cache-ak0.pinimg.com/236x/9b/8c/23/9b8c23be33111cc917862ad21c8e85ae.jpg" />     <h2 class="img-title">image description</h2>   </div>    <div class="grid-item">     <img src="http://3.bp.blogspot.com/-vfzt5p9p4ja/tltjfukg27i/aaaaaaaabgq/ujub-_1lgag/s640/fashion156tailoredissuem03.jpg" />     <h2 class="img-title">image description long text , testing if goes on edge</h2>   </div>    <div class="grid-item">     <img src="https://klosetkase.files.wordpress.com/2010/01/colbyjamarbycodazzi011.jpg" />     <h2 class="img-title">image description normal text</h2>   </div>    <div class="grid-item">     <img src="https://klosetkase.files.wordpress.com/2009/12/32.jpg" />     <h2 class="img-title">image description</h2>   </div>    <div class="grid-item">     <img src="https://s-media-cache-ak0.pinimg.com/736x/78/55/25/7855251d88a66f2f3ba8b5a7a44edaf8.jpg" />     <h2 class="img-title">image description</h2>   </div>    <div class="grid-item">     <img src="https://mensrag.files.wordpress.com/2009/09/118397_9401.jpg?w=420" />     <h2 class="img-title">image description</h2>   </div>    <div class="grid-item">     <img src="http://www.thecoolhour.com/wp-content/uploads/2013/10/rvlv_clothing_mens_press_kit_0002.jpg" />     <h2 class="img-title">image description</h2>   </div>    <div class="grid-item">     <img src="http://i874.photobucket.com/albums/ab306/districtcut2/scarfknit.png" />     <h2 class="img-title">image description</h2>   </div>    <div class="grid-item">     <img src="http://attheloft.typepad.com/.a/6a00e54ecca8b9883301630400d2ba970d-pi" />     <h2 class="img-title">image description</h2>   </div>    <div class="grid-item">     <img src="https://s-media-cache-ak0.pinimg.com/236x/d6/ee/a5/d6eea52144d63e4fc2e923d0dd6eaccb.jpg" />     <h2 class="img-title">image description</h2>   </div>    <div class="grid-item">     <img src="http://graphics8.nytimes.com/images/2015/03/08/t-magazine/08mens-well-beatnik-slide-vt66/08mens-well-beatnik-slide-vt66-jumbo.jpg" />     <h2 class="img-title">image description</h2>   </div>    <div class="grid-item">     <img src="http://2.bp.blogspot.com/-ymce5tixdzm/vsvwfpkc0gi/aaaaaaaejj8/chvdf-j-_2u/s1600/3.jpg" />     <h2 class="img-title">image description</h2>   </div> </div>

http://jsfiddle.net/lvekua/fdwv1sqk/

wrap text inside h2 in span element.

html:

<h2 class="img-title"><span>image description long text , testing if goes on edge</span></h2>

css:

h2.img-title {     display: block;     margin-bottom: 0;     margin-top: 0;     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     background: rgba(255,255,255,0.7);     opacity: 0; }  h2.img-title span {     position: absolute;     left: 0;     top: 50%;     transform: translatey(-50%);     -webkit-transform: translatey(-50%); /* ch <36, saf 5.1+, ios, =<4.4.4 */     -ms-transform: translatey(-50%); /* ie 9 */     transform: translatey(-50%); /* ie 10, fx 16+, op 12.1+ */     width: 100%; }

demo: https://jsfiddle.net/lmgonzalves/fdwv1sqk/4/


Comments

Post a Comment

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

-
i had following code works fine on localhost: $document = new domdocument(); $document->loadhtml($p_result); $form = $document->getelementsbytagname('form')->item(0); // code continues using $form variable after same code updated on outside server, loadhtml() failed , issued warning. warning: domdocument::loadhtml() expects parameter 1 valid path, string given in path/name/to/script.php returned null instead of object code pretty gets fatal error. note contents of $p_result absolutely same on outside server , on localhost. but why displays kind of warning , why not work? doesn't loadhtml() expects argument 1 string in first place? why method expects parameter 1 valid path ? just make clear i'm not calling loadhtmlfile() , i'm calling loadhtml() . thanks. you're affected one of php bugs . issue present in php 5.6.8 , 5.6.9. have affected php version on server, , bug-free version on localhost. the bug forbids null
Read more

python - How to create jsonb index using GIN on SQLAlchemy? -

-
here's current code creating index jsonb. index("mytable_data_idx_id_key", mytable.data['id'].astext, postgresql_using='gin') but got error. sqlalchemy.exc.programmingerror: (psycopg2.programmingerror) data type text has no default operator class access method "gin" hint: must specify operator class index or define default operator class data type. [sql: "create index event_data_idx_id_key on event using gin ((data ->> 'id'))"] is there way create index on sqlalchemy? the postgresql specific sqlalchemy docs @ http://docs.sqlalchemy.org/en/latest/dialects/postgresql.html#operator-classes mention postgresql_ops dictionary provide "operator class" used postgresql, , provide example illustrating use: index('my_index', my_table.c.id, my_table.c.data, postgresql_ops={ 'data': 'text_pattern_ops',
Read more

c# - TransactionScope not rolling back although no complete() is called -

-
i'm using transactionscope rollback transaction fail bool errorreported = false; action<importerrorlog> newerrorcallback = e => { errorreported = true; errorcallback(e); }; using (var transaction = new transactionscope()) { foreach (importtaskdefinition task in taskdefinition) { loader.load(streamfile, newerrorcallback, task.destinationtable, processingtaskid); } if (!errorreported) transaction.complete(); } i'm sure there no transactionscope started ahead or after code. i'm using entity framework insert in db. regardless state of errorreported transaction never rolled in case of error. what missing ? transactionscope sets transaction.current . that's does. wants transacted must @ property. i believe ef each time connection opened reason. probably, connection open when scope installed. open connection inside of scope or enlist manually. ef has nasty "design decision": default opens
Read more