html - How do I get a word to appear when I hover over each of these images? -


i'm new html , css , have tried researching problem can't find works. want simple word appear when mouse hover's on each individual picture. example first photo have word 'travel' appear either on photo or below it.

here html:

div class="section group">     <div class="col span_1_of_4">     <a href="http://me14ch.leedsnewmedia.net/portfolio/sub%20pages/travel.html"> <img src="http://me14ch.leedsnewmedia.net/portfolio/portfolioresources/travel01.png" alt="view travel photography" height="200"></a>     </div>     <div class="col span_1_of_4">     <a href="http://me14ch.leedsnewmedia.net/portfolio/sub%20pages/wedding.html"> <img src="http://me14ch.leedsnewmedia.net/portfolio/portfolioresources/weddings01.png" alt="view wedding collection" height="200"></a>     </div>     <div class="col span_1_of_4">     <a href="http://me14ch.leedsnewmedia.net/portfolio/sub%20pages/people.html"><img src="http://me14ch.leedsnewmedia.net/portfolio/portfolioresources/people01.png" alt="view people photography" height="200"></a>     </div>     <div class="col span_1_of_4">     <a href="http://me14ch.leedsnewmedia.net/portfolio/sub%20pages/studio.html"><img src="http://me14ch.leedsnewmedia.net/portfolio/portfolioresources/studio01.png" alt="view studio photoshoot" height="200"></a>     </div> </div>

and css

    /*  sections  */ .section {     clear: both;     padding-left:7px; }   /*  column setup  */ .col {     display: block;     float:left;     margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; }  /*  grouping  */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both;} .group { zoom:1; /* ie 6/7 */ } /*  grid of 4  */ .span_4_of_4 {     width: 100%; } .span_3_of_4 {     width: 74.6%; } .span_2_of_4 {     width: 49.2%; } .span_1_of_4 {     width: 23.8%; }  /*  go full width below 480 pixels */ @media screen , (max-width: 480px) {     .col {  margin: 1% 0 1% 0%; }     .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; } }

adding

title="travel"

will use browser's default tooltip display. example,

<img src="http://me14ch.leedsnewmedia.net/portfolio/portfolioresources/travel01.png" alt="view travel photography" height="200" title="travel">

if want more control, check out jqueryui's tooltip widget


Comments

Post a Comment

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

i have following sample code used pre-decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(--c); cout << c << endl; return; } } this function give output input 4 : dp3 dp2 dp1 dp0 0 1 2 3 but when use post decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(c--); cout << c << endl; return; } } output goes in infinite loop dp4 can explain me in detail why happens ? this happens because function(c--) called same value of c , when finishes c decremented. recursively called, hence called same value no chance of return , hit stack overflow error. assume this, int x = 1, y = 0; y = x++ result y == 1 , x == 2. if y = ++x , bot x , y 2.
Read more

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

i added new project. made mistake in projectname.conf file in sites-available apache2, led me reinstalling apache2. after reinstalling , re-enabling projects on every page of every project .. <body> run(); </body> .. i've run composer update, restarted service, restarted pc, checked config files, tried disabling new project. there nothing in error log, , access.log: 127.0.0.1 - - [15/may/2015:01:40:47 +0200] "get / http/1.1" 304 181 "-" "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:38.0) gecko/20100101 firefox/38.0" maybe i'm forgetting apache2 reinstall? don't think did different last time installed it. looks haven't setup php correctly. take @ this great guide , maybe you're forgetting link php config apache2.
Read more

php - How can I echo out this array? -

i don't know how go grabbing data in variable , put foreach loop. class tree{ private $info = array( array('name'=>'jim','state'=>'nu','company'=>'nu','phone'=>array('cell'=>'5615111111','office'=>'5611111111'),'email'=>array('primary'=>'exs@example.com','ex@there.com')), array('name'=>'joe smith','city'=>'phoenix','phone'=>'4805551111','email'=>'jsmith@some_email.com'), array('name'=>'john doe','city'=>'chandler','company'=>'doe co.','email'=>array('jdoe@gmail.com','personal'=>'email@email.com'),'phone'=>'6025550002') ); } if you're inside of class, can access private variable using $this->variablename . example, i...
Read more