javascript - Uneven Responsive Image/Text Grid with Overlay -

-

i've been trying create below layout no avail. kind enough me out in either creating minimal working example or linking somewhere able me out this?

what need grid row heights same. each row containing 2 images , 1 text column (the text column being placed in different locations in each row). text column needs same height images , i'd text vertically centered width of needs smaller (half size). images, i'd have white overlay on hover or touch(mobile) header , couple lines links , 1 link have video popup (a la fancybox).

i'd responsive , adapt screen sizes. on mobile i'm fine each box being 100% width it's tablet sizes think i'm having issues laying thing out properly. hover state need become touch state on these platforms.

i'd supply code if need think i'd start scratch since feel i've created huge mess.

i feel should simple yet i'm having way many problems , can't seem find websites showcase examples of i'm trying create....similar ideas have been found not i'm looking for.

details:

  • 1140px max width of container
  • 444px max width of images
  • 222px max width of text boxes
  • 5px margin/padding

any in right direction grateful.

http://jsfiddle.net/sa7v57bf/

<div class="container">     <ul>         <li class="text">             <div>                 text.             </div>         </li>         <li class="media">             <img src="http://placehold.it/444x342" alt="image">             <div class="info">                 <h2>header</h2>                 <div class="program-info">                     <p><a href="#">program page</a></p>                     <p><a href="#">video</a></p>                 </div>             </div>         </li>         <li class="media">             <img src="http://placehold.it/444x342" alt="image">             <div class="info">                 <h2>header</h2>                 <div class="program-info">                     <p><a href="#">program page</a></p>                     <p><a href="#">video</a></p>                 </div>             </div>         </li>     </ul>     <ul>         <li class="media">             <img src="http://placehold.it/444x342" alt="image">             <div class="info">                 <h2>header</h2>                 <div class="program-info">                     <p><a href="#">program page</a></p>                     <p><a href="#">video</a></p>                 </div>             </div>         </li>         <li class="text">             <div>                 text.             </div>         </li>         <li class="media">             <img src="http://placehold.it/444x342" alt="image">             <div class="info">                 <h2>header</h2>                 <div class="program-info">                     <p><a href="#">program page</a></p>                     <p><a href="#">video</a></p>                 </div>             </div>         </li>     </ul> </div>

css: 

*{box-sizing:border-box}.container{max-width:1140px;margin:0 auto;padding:0 10px}ul,ul li{padding:0}ul{list-style:none;margin:1% 0;font-size:0}ul li{display:inline-block;width:100%;margin:0 0 1%;height:100%;position:relative}ul li img{width:100%;display:block}ul li.text{background-color:#000;color:#fff;padding:20px 10px;font-size:1.5rem;width:100%;vertical-align:top;text-align:center}@media (min-width:550px){ul li{width:50%}ul li.text div{margin:2%}}@media (min-width:1000px){ul li{width:39.5%;margin:0 .5%}ul li:first-child{margin-left:0}ul li:last-child{margin-right:0}ul li.text{width:19%;min-height:305px}}@media (min-width:1140px){ul li.text{min-height:341px}ul li.text div{margin:40% 0}}.info{background:rgba(255,255,255,.83);color:#000;font-size:2.4rem;left:10px;opacity:0;overflow:hidden;padding:3rem;position:absolute;top:10px;right:10px;bottom:10px;-webkit-transition:.6s;transition:.6s}.info:hover{opacity:1}

grid example

a combination of things here.

flexbox equal heights, max-width required, paddings/margin spacing....oh, , positioning overlays.

* {    margin: 0;    padding: 0;    box-sizing: border-box;  }  .wrapper {    max-width: 1140px;    margin: auto;    margin-top: 5px;    border: 1px solid grey;    display: flex;    padding: 5px;  }  .wrapper > *:nth-child(2) {    margin: 0 5px;  }  .text,  header,  imgwrap {    flex: 1;  }  .text {    width: 20%;    padding: 1em;    max-width: 222px;    background: orange;    display: flex;    justify-content: center;    align-items: center;  }  header {    background: #bada55;    position: relative;  }  .imgwrap .overlay,  header .overlay {    position: absolute;    top: 0;    left: 0;    height: 100%;    width: 100%;    background: rgba(155, 0, 65, .25);    padding: 1em;    font-weight: bold;    color: #fff;    opacity: 0;    visibility: hidden;    transition: opacity .25s ease, visibility 0.25s ease;  }  .imgwrap:hover .overlay,  header:hover .overlay {    opacity: 1;    visibility: visible;  }  .imgwrap {    width: 40%;    position: relative;  }  .imgwrap img {    width: 100%;    display: block;    max-width: 444px;  }
<div class="wrapper">    <div class="text">lorem ipsum dolor.</div>    <header>      <div class="overlay">overlay text</div>    </header>    <div class="imgwrap">      <img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />      <div class="overlay">image text</div>    </div>  </div>    <div class="wrapper">    <div class="imgwrap">      <img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />      <div class="overlay">image text</div>    </div>    <div class="text">lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>    <div class="imgwrap">      <img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />      <div class="overlay">image text</div>    </div>  </div>

media queries can manage rest.

codepen demo.


Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

java - Android – MapFragment overlay button shadow, just like MyLocation button -

-
Image
i'm struggling add shadow custom overlay button on google map. goal make custom button google's mylocation button. here's how app looks now: layout.xml <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent" style="@style/apptheme"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map" tools:context=".mapsactivity" android:name="com.google.android.gms.maps.supportmapfragment" android:layout_alignparentend="true" android:layout_alignparentstart="true" android:layout_alignparentbottom="true" ...
Read more