Hover captions
How do I make an hover captions?
Simple Clean Team images with hover intent. What is a hover captions? How do you make a hover captions? This script and codes were developed by Andi Dysart on 13 July 2022, Wednesday.
Hover captions - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover captions</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- ============================================================================= Title: Simple Hover captions Description: Simple Clean Team images with hover intent Nerds name: Andi Site: http://andi.io Twitter: @gitmash Location: Zurich, Switzerland ==== THANKS ==== Hover Intent: http://benalman.com/projects/jquery-dotimeout-plugin/ Images: http://bkbs.brooklynboulders.com/about-us/staff/ Images avalible on Flickr font: http://fontawesome.io/icons/ ==== @TODO ==== Grid?
========================================================================== -->
<ul class="caption" id="captions"> <!-- Team member 1 --> <li class="caption_single"> <img src="http://s26.postimg.org/uxt5xyu7t/team_m_8.jpg"/> <span class="caption_single--content fade-caption"> <h3 class="caption_single--name">James Smith</h3> <h2 class="caption_single--job">CEO</h2> <span class="caption_single--divider"></span> <p class="caption_single--quote">With a bichermüesli my day starts perfectly</p> <ul class="caption_single--social"> <li><a href="javascript:void(0);"><i class="fa fa-facebook"></i></a></li> <li><a href="javascript:void(0);"><i class="fa fa-twitter"></i></a></li> <li><a href="javascript:void(0);"><i class="fa fa-envelope-o"></i></a></li> </ul> </span> </li> <!-- Team member 2 --> <li class="caption_single"> <img src="http://s26.postimg.org/w573q6kc9/team_m_9.jpg"/> <span class="caption_single--content fade-caption"> <h3 class="caption_single--name">Sophie Col</h3> <h2 class="caption_single--job">CFO</h2> <span class="caption_single--divider"></span> <p class="caption_single--quote">Sun - surf - love</p> <ul class="caption_single--social"> <li><a href="javascript:void(0);"><i class="fa fa-twitter"></i></a></li> <li><a href="javascript:void(0);"><i class="fa fa-linkedin"></i></a></li> <li><a href="javascript:void(0);"><i class="fa fa-github"></i></a></li> </ul> </span> </li> <!-- Team member 3 --> <li class="caption_single"> <img src="http://s26.postimg.org/l4byl5s3d/team_m_10.jpg"/> <span class="caption_single--content fade-caption"> <h3 class="caption_single--name">Peter Cappy</h3> <h2 class="caption_single--job">Design</h2> <span class="caption_single--divider"></span> <p class="caption_single--quote"> The Fondue maker</p> <ul class="caption_single--social"> <li><a href="javascript:void(0);"><i class="fa fa-twitter"></i></a></li> <li><a href="javascript:void(0);"><i class="fa fa-facebook"></i></a></li> <li><a href="javascript:void(0);"><i class="fa fa-tumblr"></i></a></li> </ul> </span> </li> <!-- Team member 4 --> <li class="caption_single"> <img src="http://s26.postimg.org/m429gv795/team_m_11.jpg"/> <span class="caption_single--content fade-caption"> <h3 class="caption_single--name">Maxi Modes</h3> <h2 class="caption_single--job">Service</h2> <span class="caption_single--divider"></span> <p class="caption_single--quote">Landlock is where da ship @</p> <ul class="caption_single--social"> <li><a href="javascript:void(0);"><i class="fa fa-twitter"></i></a></li> <li><a href="javascript:void(0);"><i class="fa fa-tumblr"></i></a></li> <li><a href="javascript:void(0);"><i class="fa fa-envelope-o"></i></a></li> </ul> </span> </li> <!-- Team member 5 --> <li class="caption_single"> <img src="http://s26.postimg.org/n7mdstrw9/team_m_12.jpg"/> <span class="caption_single--content fade-caption"> <h3 class="caption_single--name">Sam Willys</h3> <h2 class="caption_single--job">Marketing</h2> <span class="caption_single--divider"></span> <p class="caption_single--quote">Hippstermatic!!</p> <ul class="caption_single--social"> <li><a href="javascript:void(0);"><i class="fa fa-facebook"></i></a></li> <li><a href="javascript:void(0);"><i class="fa fa-twitter"></i></a></li> <li><a href="javascript:void(0);"><i class="fa fa-pinterest"></i></a></li> </ul> </span> </li> </ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Hover captions - Script Codes CSS Codes
html { background-color: #eaeaea;
}
body { font-family: 'Nunito', sans-serif;
}
*,
*:after,
*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.caption { height: auto; margin: 80px auto 0 auto; width: 660px; /* Image Box Style */ /* Caption Common Style */
}
.caption .caption_single { cursor: pointer; height: 280px; width: 280px; position: relative; float: left; overflow: hidden; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc;
}
.caption img { position: absolute; left: 0; height: 100%; overflow: hidden; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out;
}
.caption .caption_single--content { background-color: rgba(0, 0, 0, 0.5); position: absolute; color: #fff; z-index: 100; left: 0; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out;
}
.caption .caption_single--name { font-size: 1.3em;
}
.caption .caption_single--job { margin: 0.4em 0em;
}
.caption .caption_single--social { margin-top: 15px; font-size: 20px;
}
.caption .caption_single--social li { display: inline-block;
}
.caption .caption_single--social a { color: #fff; margin: 5px;
}
.caption .caption_single--social a:hover { color: pink; margin: 5px;
}
.caption .caption_single--divider { border-top: 3px solid pink; width: 50px; display: block; margin: 10px auto;
}
.caption .fade-caption { text-align: center; opacity: 0; width: 280px; height: 280px; padding-right: 10%; padding-left: 10%; padding-top: 35%;
}
.caption .caption_single--hover img { -moz-transform: scale(1.02); -o-transform: scale(1.02); -webkit-transform: scale(1.02); transform: scale(1.02);
}
.caption .caption_single--hover .fade-caption { opacity: 1;
}
Hover captions - Script Codes JS Codes
/* * jQuery doTimeout: Like setTimeout, but better! - v1.0 - 3/3/2010 * http://benalman.com/projects/jquery-dotimeout-plugin/ * * Copyright (c) 2010 "Cowboy" Ben Alman * Dual licensed under the MIT and GPL licenses. * http://benalman.com/about/license/ */
(function($){var a={},c="doTimeout",d=Array.prototype.slice;$[c]=function(){return b.apply(window,[0].concat(d.call(arguments)))};$.fn[c]=function(){var f=d.call(arguments),e=b.apply(this,[c+f[0]].concat(f));return typeof f[0]==="number"||typeof f[1]==="number"?this:e};function b(l){var m=this,h,k={},g=l?$.fn:$,n=arguments,i=4,f=n[1],j=n[2],p=n[3];if(typeof f!=="string"){i--;f=l=0;j=n[1];p=n[2]}if(l){h=m.eq(0);h.data(l,k=h.data(l)||{})}else{if(f){k=a[f]||(a[f]={})}}k.id&&clearTimeout(k.id);delete k.id;function e(){if(l){h.removeData(l)}else{if(f){delete a[f]}}}function o(){k.id=setTimeout(function(){k.fn()},j)}if(p){k.fn=function(q){if(typeof p==="string"){p=g[p]}p.apply(m,d.call(n,i))===true&&!q?o():e()};o()}else{if(k.fn){j===undefined?e():k.fn(j===false);return true}else{e()}}}})(jQuery);
$('#captions li').hover(function(){ $(this).doTimeout( 'hover', 680, 'addClass', 'caption_single--hover' );
}, function(){ $(this).doTimeout( 'hover', 250, 'removeClass', 'caption_single--hover' );
});
Developer | Andi Dysart |
Username | andiio |
Uploaded | July 13, 2022 |
Rating | 3 |
Size | 4,844 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Inline keyboard button illustration | 2,229 Kb |
Basic hotel booking form | 5,736 Kb |
Mailchip email signup form | 3,113 Kb |
Mobile first - hide on scroll menu | 5,301 Kb |
Credit card inline list | 2,988 Kb |
Hotel room thumb | 5,295 Kb |
Basic form | 3,006 Kb |
Mockup animation for Ghostlab | 5,396 Kb |
A Pen by Andi Dysart | 3,936 Kb |
Mailchip signup form | 3,239 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Fullscreen Parallax | Bassta | 3,313 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Preloader | Rikki_Sixx | 2,815 Kb |
Basic template | Tomcat | 1,675 Kb |
How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
Flexbox playground | Enxaneta | 5,418 Kb |
Video mute | Leon9208 | 2,131 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!