css3 - jquery to change image and show captions on mouse-hover -



css3 - jquery to change image and show captions on mouse-hover -

below codes: class="snippet-code-css lang-css prettyprint-override"> * { font-family: arial; } .slide-container { /*border: solid 1px;*/ width: 500px; height: 360px; } .slide-jumbo { /*border: solid 1px;*/ width: 500px; height: 300px; overflow: hidden; } .jumbo { position: relative; display: inline-block; width: 500px; height: 300px; float: left; } .jumbo img, .thumb img { position: absolute; left: 0; } .jumbo img { top: 0; } .thumb img { bottom: 0; } .jumbo-capt, .thumb-capt { width: 100%; background-color: rgba(0,0,0,0.8); position: absolute; color: #fff; z-index: 100; /* -webkit-transition: 300ms ease-out; -moz-transition: 300ms ease-out; -o-transition: 300ms ease-out; -ms-transition: 300ms ease-out; transition: 300ms ease-out; */ left: 0; bottom: 0; } .slide-thumb { /*border: solid 1px;*/ width: 500px; height: 60px; overflow: hidden; } .thumb { position: relative; /*border: solid 1px;*/ display: inline-block; width: 100px; height: 60px; overflow: hidden; float: left; } class="snippet-code-html lang-html prettyprint-override"><!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <title></title> <script src="js/jquery.min.js"></script> <style type="text/css"> * { font-family: arial; } .slide-container { /*border: solid 1px;*/ width: 500px; height: 360px; } .slide-jumbo { /*border: solid 1px;*/ width: 500px; height: 300px; overflow: hidden; } .jumbo { position: relative; display: inline-block; width: 500px; height: 300px; float: left; } .jumbo img, .thumb img { position: absolute; left: 0; } .jumbo img { top: 0; } .thumb img { bottom: 0; } .jumbo-capt, .thumb-capt { width: 100%; background-color: rgba(0,0,0,0.8); position: absolute; color: #fff; z-index: 100; /* -webkit-transition: 300ms ease-out; -moz-transition: 300ms ease-out; -o-transition: 300ms ease-out; -ms-transition: 300ms ease-out; transition: 300ms ease-out; */ left: 0; bottom: 0; } .slide-thumb { /*border: solid 1px;*/ width: 500px; height: 60px; overflow: hidden; } .thumb { position: relative; /*border: solid 1px;*/ display: inline-block; width: 100px; height: 60px; overflow: hidden; float: left; } </style> </head> <body> <div class="slide-container"> <div class="slide-jumbo"> <div class="jumbo" data-image="1"> <img src="images/2.png"> <div class="jumbo-capt"> <h3>title 1</h3> <p>summary 1</p> </div> </div> <div class="jumbo" data-image="2"> <img src="images/3.png"> <div class="jumbo-capt"> <h3>title 2</h3> <p>summary 2</p> </div> </div> <div class="jumbo" data-image="3"> <img src="images/9.png"> <div class="jumbo-capt"> <h3>title 3</h3> <p>summary 3</p> </div> </div> <div class="jumbo" data-image="4"> <img src="images/7.png"> <div class="jumbo-capt"> <h3>title 4</h3> <p>summary 4</p> </div> </div> <div class="jumbo" data-image="5"> <img src="images/9.png"> <div class="jumbo-capt"> <h3>title 5</h3> <p>summary 5</p> </div> </div> </div> <div class="slide-thumb"> <div class="thumb" data-image="1"> <img src="images/2small.png"> <div class="thumb-capt"> <p> <strong> title 1 </strong> </p> </div> </div> <div class="thumb" data-image="2"> <img src="images/3small.png"> <div class="thumb-capt"> <p> <strong> title 2 </strong> </p> </div> </div> <div class="thumb" data-image="3"> <img src="images/9small.png"> <div class="thumb-capt"> <p> <strong> title 3 </strong> </p> </div> </div> <div class="thumb" data-image="4"> <img src="images/7small.png"> <div class="thumb-capt"> <p> <strong> title 4 </strong> </p> </div> </div> <div class="thumb" data-image="5"> <img src="images/9small.png"> <div class="thumb-capt"> <p> <strong> title 5 </strong> </p> </div> </div> </div> </div> </body> </html>

how can add together js changing image , show caption on mouse-hover?

try : can utilize mouseenter event , utilize fadein / fadeout show / hide images.

$(function(){ $('.slide-thumb .thumb').on("mouseenter",function(){ var dataimage = $(this).data('image'); $('.slide-jumbo .jumbo:visible').fadeout(1000,function(){ $('.slide-jumbo .jumbo[data-image="'+dataimage+'"]').fadein(500); }); }); });

demo

jquery css3 slider mousehover

Comments

Post a Comment

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* - i've inherited doc publishing process takes docbook , builds html , pdf output, using apache fop both. project had been started, never completed. lots of tweaking, i've able of doc sets build (20+), except handful, , fail severe code 1 of these 2 conditions: "fo:flow" missing kid elements. required content model: marker* "fo:block" not valid kid of "fo:root" the xml output comes out of docbook , docbook-fop checks out well-formed. the fop error in 1 book, "endecagloss", example, points end of string: <fo:flow flow-name="xsl-region-body" start-indent="4pc" end-indent="0pt"/> here’s log output in case: [java] severe: javax.xml.transform.transformerexception: file:/scratch/publishing/hudson/jobs/build-main-endeca-documentation/workspace/serverdoc/w...
Read more

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? - i want insert tables in infoboxes. example, have proteinbox i've developed using infobox template (http://health-and-medicine.wikia.com/wiki/template:proteinbox), , fasta field big fit comfortably in proteinbox. hence collapsible table within box. this tried: {{infobox | row 1 = {| class = "mw-collapsible mw-collapsed wikitable" |- | <!-- table content --> |} }} your problem is, putting nested table within template. pipe characters ( | ) in table syntax collides pipe usage in templates. the commonly used hack around create template called template:! , containing pipe character, , utilize when need set tables, parser functions or other stuff using pipe characters, within templates. table (with every | replaced {{!}} ): {{{!}} {{!}}- {{!}} a1 {{!}} b1 {{!}}- {{!}} a2 {{!}} b2 {{!}}} ...the equivalent of {| |- | a1 | b1 |- | a2 | b2 |} furthermore, hav...
Read more

Local Service User Logged into Windows -

Local Service User Logged into Windows - i created windows service tracks app server user connected through load balancer. it retrieves user logged windows on machine, cross references active directory (ad) business relationship homecoming first name, lastly name , e-mail (for notification through website created project) there 1 scheme on network users remote system, vista system, reason returning values "local service" logged machine, it's weird , security guys impossible "local service" business relationship logged windows. here how user logged windows managementscope ms = new managementscope("\\\\.\\root\\cimv2"); objectquery query = new objectquery("select * win32_computersystem"); managementobjectsearcher searcher = new managementobjectsearcher(ms, query); foreach (managementobject mo in searcher.get()) { _username = mo["username"].tostring(); } // remove domain part username string[] usernameparts = _...
Read more