Skip to content

Instantly share code, notes, and snippets.

@dmmfll

dmmfll/gmjakx.markdown

Created September 15, 2017 23:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dmmfll/07990dc1b980212bb50e38e268981a9a to your computer and use it in GitHub Desktop.
Save dmmfll/07990dc1b980212bb50e38e268981a9a to your computer and use it in GitHub Desktop.
Download ZIP
GMJaKX
Raw
index.html
<div class ="container">
<div class = "row">
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/1"><img class="img-responsive" src="http://www.caaws.org/wp-content/uploads/2017/03/pat-the-cat-e1488716652150.jpg" alt="Pat the cat e1488716652150" /></a> </td>
<td>Pat</td>
</div>
<div id="text-pop">This is some text.</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/2"><img class="img-responsive" src="http://www.caaws.org/wp-content/uploads/2017/05/thumbnail_rosie2-e1495672219950-300x300.jpg" alt="Thumbnail rosie2 e1495672219950 300x300" /></a> </td>
<td>Rosie</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/3"><img class="img-responsive" src="http://www.wnynetworks.net/~heartfor//adoptable_photos/r_0606150328_1.jpg" alt="R 0606150328 1" /></a> </td>
<td>Rex</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/4"><img class="img-responsive" src="https://static1.squarespace.com/static/57589331f8baf360886e43ab/576afc2e414fb5f6a4ba39f2/576afc409f7456da7992157d/1466629768487/IMG_5551.jpeg?format=300w" alt="Img 5551" /></a> </td>
<td>Pinky</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/5"><img class="img-responsive" src="http://www.wnynetworks.net/~heartfor//adoptable_photos/r_0128140450_1.jpg" alt="R 0128140450 1" /></a> </td>
<td>Sprinkle</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/6"><img class="img-responsive" src="http://4.bp.blogspot.com/-GsDkrDhT9Ug/T-yQwNMkF5I/AAAAAAAAD_Y/oEvjB0MMh8M/s400/pointer1.jpg" alt="Pointer1" /></a> </td>
<td>Rover</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/7"><img class="img-responsive" src="http://www.caaws.org/wp-content/uploads/2017/05/norris2-300x300.jpg" alt="Norris2 300x300" /></a> </td>
<td>Norris</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/8"><img class="img-responsive" src="http://suindependent.com/wp-content/uploads/2017/07/Arroyo-1.jpg" alt="Arroyo 1" /></a> </td>
<td>Arroyo</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/9"><img class="img-responsive" src="http://www.caaws.org/wp-content/uploads/2016/08/zia-1-300x300.jpg" alt="Zia 1 300x300" /></a> </td>
<td>Zia</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/10"><img class="img-responsive" src="http://www.caaws.org/wp-content/uploads/2017/05/Draper3-e1494641108487-300x300.jpg" alt="Draper3 e1494641108487 300x300" /></a> </td>
<td>Draper</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/11"><img class="img-responsive" src="http://www.caaws.org/wp-content/uploads/2016/08/francine-1-300x300.jpg" alt="Francine 1 300x300" /></a> </td>
<td>Francine</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/12"><img class="img-responsive" src="https://i.pinimg.com/736x/3a/53/4b/3a534b12d907bc3b92d2cfa6c9763181--pet-shelter-shelters.jpg" alt="3a534b12d907bc3b92d2cfa6c9763181 pet shelter shelters" /></a> </td>
<td>Cutie</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/13"><img class="img-responsive" src="http://suindependent.com/wp-content/uploads/2017/05/Bert.jpg" alt="Bert" /></a> </td>
<td>Bert</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/14"><img class="img-responsive" src="https://i.pinimg.com/736x/8f/b2/94/8fb2946148162833194bb23b323e48f2--calgary-people.jpg" alt="8fb2946148162833194bb23b323e48f2 calgary people" /></a> </td>
<td>Dusty</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/15"><img class="img-responsive" src="http://www.caaws.org/wp-content/uploads/2017/04/Roscoe-2-e1492431206120-300x300.jpg" alt="Roscoe 2 e1492431206120 300x300" /></a> </td>
<td>Roscoe</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/16"><img class="img-responsive" src="https://i.pinimg.com/736x/cb/45/95/cb45950ad72e750b0b687d7ed5384f0d--how-to-get-doberman-pinscher.jpg" alt="Cb45950ad72e750b0b687d7ed5384f0d how to get doberman pinscher" /></a> </td>
<td>Fred</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/17"><img class="img-responsive" src="https://static1.squarespace.com/static/522c9189e4b09d456b09290d/t/569e4ee4cbced647da459909/1453215484653/" alt="1453215484653" /></a> </td>
<td>Honey</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/18"><img class="img-responsive" src="http://www.gannett-cdn.com/-mm-/9065941e142eb769bb76794c742e08d1e14ee558/r=300/http/www.gannett-cdn.com/-mm-/9065941e142eb769bb76794c742e08d1e14ee558/r=300/http/www.gannett-cdn.com/-mm-/20405e013c17db0ffab48c79faab251c7e16373c/c=108-0-588-480/local/-/media/2015/12/02/Phoenix/Phoenix/635846483676209811-Happy.jpg" alt="635846483676209811 happy" /></a> </td>
<td>Phoenix</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/19"><img class="img-responsive" src="http://www.caaws.org/wp-content/uploads/2016/08/misstoot-1-300x300.jpg" alt="Misstoot 1 300x300" /></a> </td>
<td>Miss Toot</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/20"><img class="img-responsive" src="http://www.gannett-cdn.com/-mm-/9065941e142eb769bb76794c742e08d1e14ee558/r=300/http/www.gannett-cdn.com/-mm-/9065941e142eb769bb76794c742e08d1e14ee558/r=300/http/www.gannett-cdn.com/-mm-/236beb293d6192e9ce254d085efaaa3ca5aa22cf/c=82-0-596-514/local/-/media/2016/01/06/Phoenix/Phoenix/635876984318353757-frankiepotw.JPG" alt="635876984318353757 frankiepotw" /></a> </td>
<td>Rufus</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/21"><img class="img-responsive" src="https://www.petcentric.com/media/187753/seniorcats.jpg?anchor=center&amp;mode=crop&amp;quality=80&amp;width=300&amp;height=300&amp;rnd=131239573680000000" alt="Seniorcats" /></a> </td>
<td>Simba</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/22"><img class="img-responsive" src="http://www.muchlove.org/wp-content/uploads/2017/09/Buck1-300x300.jpg" alt="Buck1 300x300" /></a> </td>
<td>Buck</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/23"><img class="img-responsive" src="http://suindependent.com/wp-content/uploads/2017/07/Chaz.jpg" alt="Chaz" /></a> </td>
<td>Chaz</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/24"><img class="img-responsive" src="http://www.caaws.org/wp-content/uploads/2017/05/thumbnail_Flora-3-e1493943925733-300x300.jpg" alt="Thumbnail flora 3 e1493943925733 300x300" /></a> </td>
<td>Flora</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/25"><img class="img-responsive" src="http://www.caaws.org/wp-content/uploads/2016/08/Amira-2-1-300x300.jpg" alt="Amira 2 1 300x300" /></a> </td>
<td>Amira</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/26"><img class="img-responsive" src="https://pet-net.net/wp-content/uploads/Scruffy-Papillon-Dog-For-Adoption-in-Hawaii3-300x300.jpg" alt="Scruffy papillon dog for adoption in hawaii3 300x300" /></a> </td>
<td>Scruffy</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/27"><img class="img-responsive" src="http://www.caaws.org/wp-content/uploads/2016/12/thumbnail_damon3-e1481809847953-300x300.jpg" alt="Thumbnail damon3 e1481809847953 300x300" /></a> </td>
<td>Damon</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/28"><img class="img-responsive" src="http://www.hslcnm.org/wp-content/uploads/2016/01/dog.png" alt="Dog" /></a> </td>
<td>Conor</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/29"><img class="img-responsive" src="https://i.pinimg.com/originals/37/4f/79/374f790a06098ed88285bf980a1aec72.jpg" alt="374f790a06098ed88285bf980a1aec72" /></a> </td>
<td>Darkness</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/30"><img class="img-responsive" src="http://cayugadogrescue.org/wp/wp-content/uploads/2017/06/Daisy2-300.jpg" alt="Daisy2 300" /></a> </td>
<td>Daisy</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/31"><img class="img-responsive" src="https://static.wixstatic.com/media/c7b55b_70e72588b1d44ce187c687ab27713f43~mv2_d_3356_5034_s_4_2.jpg/v1/fill/w_300,h_300/c7b55b_70e72588b1d44ce187c687ab27713f43~mv2_d_3356_5034_s_4_2.jpg" alt="C7b55b 70e72588b1d44ce187c687ab27713f43~mv2 d 3356 5034 s 4 2" /></a> </td>
<td>Snow White</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/32"><img class="img-responsive" src="http://harmonyhaven.org/murial.jpg" alt="Murial" /></a> </td>
<td>Murial</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/33"><img class="img-responsive" src="http://suindependent.com/wp-content/uploads/2017/07/Misty.jpg" alt="Misty" /></a> </td>
<td>Misty</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/34"><img class="img-responsive" src="http://noahsarksociety.org/wp-content/uploads/2017/07/20170711_170843-300x300.jpg" alt="20170711 170843 300x300" /></a> </td>
<td>Bruiser</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/35"><img class="img-responsive" src="https://pspca.org/wp-content/uploads/2015/10/Chardonnay-300x300.jpg" alt="Chardonnay 300x300" /></a> </td>
<td>Chardonnay</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/36"><img class="img-responsive" src="http://newarkvethospital.com/wp-content/uploads/2016/04/english-bulldog-538485_640-300x300.jpg" alt="English bulldog 538485 640 300x300" /></a> </td>
<td>Rocky</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/37"><img class="img-responsive" src="http://community.warm1069.com/wp-content/uploads/2015/12/keke-300x300.jpg" alt="Keke 300x300" /></a> </td>
<td>Keke</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/38"><img class="img-responsive" src="https://www.polyvore.com/cgi/img-thing?.out=jpg&amp;size=l&amp;tid=117761067" alt="Img thing?" /></a> </td>
<td>Rocko</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/39"><img class="img-responsive" src="http://memphistn.gov/Portals/0/images/ADOPTcat.jpg" alt="Adoptcat" /></a> </td>
<td>Benji</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/40"><img class="img-responsive" src="http://media.npr.org/assets/img/2014/07/03/punta-santiago-sato-pier-pack_sq-7b41efd7912d7d3d14430e00d5c1bebe3594cc76-s300-c85.jpg" alt="Punta santiago sato pier pack sq 7b41efd7912d7d3d14430e00d5c1bebe3594cc76 s300 c85" /></a> </td>
<td>Santiago</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/41"><img class="img-responsive" src="http://www.caaws.org/wp-content/uploads/2016/08/sophia-1-300x300.jpg" alt="Sophia 1 300x300" /></a> </td>
<td>Sophia</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/42"><img class="img-responsive" src="http://speciesworld.com/wp-content/uploads/michigan-humane-society-adoptable-dogs-photograph-on-with-adopt-pet.jpg" alt="Michigan humane society adoptable dogs photograph on with adopt pet" /></a> </td>
<td>Joe</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/43"><img class="img-responsive" src="http://www.petsandpeople.com/wp-content/uploads/2016/04/AdoptableCats.jpg" alt="Adoptablecats" /></a> </td>
<td>Snowflake</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/44"><img class="img-responsive" src="http://i2.wp.com/shelter-friends.com/wp-content/uploads/2013/11/Dog-Winston-Needs-A-Home.jpg?resize=300%2C300" alt="Dog winston needs a home" /></a> </td>
<td>Winston</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/45"><img class="img-responsive" src="https://www.polyvore.com/cgi/img-thing?.out=jpg&amp;size=l&amp;tid=110183103" alt="Img thing?" /></a> </td>
<td>Eileen</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/46"><img class="img-responsive" src="http://www.pawsitivematch.org/perch/resources/clark-1-thumb2x-w380h380.jpg" alt="Clark 1 thumb2x w380h380" /></a> </td>
<td>Clark</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/47"><img class="img-responsive" src="http://photos.petfinder.com/photos/pets/38919498/1/?bust=1501293712&amp;width=300&amp;-pn.jpg" alt="?bust=1501293712&amp;width=300&amp; pn" /></a> </td>
<td>Oreo</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/48"><img class="img-responsive" src="http://gentlebensgiants.org/wp-content/uploads/2017/03/luke-300x300.jpg" alt="Luke 300x300" /></a> </td>
<td>Luke</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/49"><img class="img-responsive" src="http://specialpalsshelter.org/wp-content/uploads/2016/02/abby-cat-for-adoptable-pals-website-300x300.jpg" alt="Abby cat for adoptable pals website 300x300" /></a> </td>
<td>Buster</td>
</div>
</div>
<div class = "column">
<div class="col-md-4" id = "petcontainer">
<td><a href="/pets/50"><img class="img-responsive" src="http://speciesworld.com/wp-content/uploads/michigan-humane-society-adoptable-dogs-portrait-on-also-the-most-adorable-currently-up-for-adoption-at.jpg" alt="Michigan humane society adoptable dogs portrait on also the most adorable currently up for adoption at" /></a> </td>
<td>Pinelope</td>
</div>
</div>
Raw
script.js
$(document).ready(function(){
console.log('hello')
$('a').hover( function(){
var imageAlt = $(this).find('img').attr('alt');
// $(".col-md-4").text(imageAlt);
console.log(imageAlt)
$("#text-pop").text(imageAlt);
$("#text-pop").fadeIn(200);
$("#text-pop").css({
"position": "absolute",
"top": "25%",
"left": "20%",
"background": "yellow",
"padding": "30px"
})
}, function(){
$("#text-pop").hide();
console.log('out')
} )
})
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Raw
style.css
td {
position: relative;
}
#text-pop{
display: none;
position: absolute;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment