html - CSS hover text over image on hover -


i following tutorial hover effect on images text pops , background turns dark. tutorial here.

i having small problem hover effect, when mouse hovers on image, want image go dark , entire image covered, when set ul.img-list li height 100% takes 100% of text, can set height height of image, when height changes based on window size, won't cover properly. missing something?

image example

html:

<div class="column large-6">    <ul class="img-list">      <li>        <a href="#">          <img src="https://www.ricoh.com/r_dc/r/r8/img/sample_08.jpg" />          <span class="text-content">            <span>hello@!</span>         </span>       </a>     </li>  </ul>

css:

ul.img-list {   list-style-type: none;   margin: 0;   padding: 0;   text-align: center; } ul.img-list li {   display: inline-block;   height: 100%;   margin: 0 1em 1em 0;   position: relative;   width: 100%; } span.text-content {   background: rgba(0,0,0,0.5);   color: white;   cursor: pointer;   display: table;   height: 150px;   left: 0;   position: absolute;   top: 0;   width: 150px; }  span.text-content span {   display: table-cell;   text-align: center;   vertical-align: middle; }  span.text-content {   background: rgba(0,0,0,0.5);   color: white;   cursor: pointer;   display: table;   height: 100%;   left: 0;   position: absolute;   top: 0;   width: 150px;   opacity: 0;   -webkit-transition: opacity 500ms;   -moz-transition: opacity 500ms;   -o-transition: opacity 500ms;   transition: opacity 500ms; }

here jsfiddle - http://jsfiddle.net/f32kn4h5/

i think part of problem after looking @ fiddle none of parent divs have height property set static. if try changing span styling say, 300px, see change:

span.text-content {   height: 300px; }

alternatively, set every parent of text span's height 100% or something, height must present every parent:

<div class="column large-6"> //set 100% or    <ul class="img-list">  //set 100% or      <li>  //set 100% or        <a href="#">          <img src="https://www.ricoh.com/r_dc/r/r8/img/sample_08.jpg" />          <span class="text-content">            <span>hello@!</span>         </span>       </a>     </li>  </ul>

this should make work, here's update fiddle: http://jsfiddle.net/f32kn4h5/3/


Comments

Post a Comment

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template. but have no idea how start building it... how include date data directive? i appreciate guide or give me advice work on more precisely. it might you! follow below steps html code sample: <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/> <hr/> <pre>birthdate = {{birthdate}}</pre> <script type="text/ng-template" id="custom-datepicker.html"> <div class="enhanced-datepicker"> <div class="proxied-field-wrap"> <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/> </div> <label> <button class="btn" type="button"><i class="icon-calendar"></i>
Read more

javascript - jQuery date picker - Disable dates after the selection from the first date picker -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function () { $("#datepicker1").datepicker(); }); </script> <script> $(function () { $("#datepicker2").datepicker(); }); </script> </head> <body> <p>date 1: <input type="text" id="datepicker1"></p> <p>date 2: <input type="t
Read more