Portfolio Hover Style

Developer
Siful Islam
Size
5,140 Kb
Views
4,048
  1. Portfolio Hover Style Previews
  2. Portfolio Hover Style HTML Codes
  3. Portfolio Hover Style CSS Codes
  4. Portfolio Hover Style JS Codes

How do I make an portfolio hover style?

What is a portfolio hover style? How do you make a portfolio hover style? This script and codes were developed by Siful Islam on 30 January 2023, Monday.

Portfolio Hover Style Previews
IQ Test

Portfolio Hover Style - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Hover Style</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--content section start-->
<section id="content" class="content light-bg">
<div class="portfolio-wrapper container"> <div class="row"> <div class="text-center"> <ul class="portfolio-filter">	<li><a href='#' data-filter='*'>All</a></li>	<li><a href='#' data-filter='.portfolio-tag-crafts'>crafts</a></li>	<li><a href='#' data-filter='.portfolio-tag-creative'>Creative</a></li>	<li><a href='#' data-filter='.portfolio-tag-illustration'>illustration</a></li>	<li><a href='#' data-filter='.portfolio-tag-media'>media</a></li>	<li><a href='#' data-filter='.portfolio-tag-web'>Web</a></li>
</ul> </div> <div class="portfolio creek-masonry-750 col-3 gutter"> <div class="post-1533 type-portfolio status-publish has-post-thumbnail hentry portfolio-tag-media portfolio-item"> <a href="http://creek.themebucket.net/portfolio/home-page-variation/" class="thumb"> <img width="750" height="469" src="http://creek.themebucket.net/wp-content/uploads/2015/09/1.jpg" class="attachment-creek-masonry-750 wp-post-image" alt="1" /> <div class="portfolio-hover"> <div class="portfolio-description"> <h4>Elegant Chair</h4> <div><p>Scholarly interest in creativity involves many definitions and concepts pertaining to a number of disciplines: &#8230;</p>
</div> </div> </div> </a> </div> <div class="post-1532 type-portfolio status-publish has-post-thumbnail hentry portfolio-tag-web portfolio-item"> <a href="http://creek.themebucket.net/portfolio/portfolio-variation/" class="thumb"> <img width="750" height="938" src="http://creek.themebucket.net/wp-content/uploads/2015/09/5.jpg" class="attachment-creek-masonry-750 wp-post-image" alt="5" /> <div class="portfolio-hover"> <div class="portfolio-description"> <h4>Portfolio Variation</h4> <div><p>Scholarly interest in creativity involves many definitions and concepts pertaining to a number of disciplines: &#8230;</p>
</div> </div> </div> </a> </div> <div class="post-1531 type-portfolio status-publish has-post-thumbnail hentry portfolio-tag-media portfolio-tag-web portfolio-item"> <a href="http://creek.themebucket.net/portfolio/simple-variation/" class="thumb"> <img width="750" height="563" src="http://creek.themebucket.net/wp-content/uploads/2015/09/08b.jpg" class="attachment-creek-masonry-750 wp-post-image" alt="08b" /> <div class="portfolio-hover"> <div class="portfolio-description"> <h4>Simple Variation</h4> <div><p>Creativity is a phenomenon whereby something new and somehow valuable is formed. The created item &#8230;</p>
</div> </div> </div> </a> </div> <div class="post-1445 type-portfolio status-publish has-post-thumbnail hentry portfolio-tag-crafts portfolio-tag-illustration portfolio-tag-media portfolio-item"> <a href="http://creek.themebucket.net/portfolio/easy-to-customize/" class="thumb"> <img width="750" height="469" src="http://creek.themebucket.net/wp-content/uploads/2015/09/09.jpg" class="attachment-creek-masonry-750 wp-post-image" alt="09" /> <div class="portfolio-hover"> <div class="portfolio-description"> <h4>Easy to Customize</h4> <div><p>A stream is a body of water[1] with a current, confined within a bed and &#8230;</p>
</div> </div> </div> </a> </div> <div class="post-1444 type-portfolio status-publish has-post-thumbnail hentry portfolio-item"> <a href="http://creek.themebucket.net/portfolio/amazing-blog/" class="thumb"> <img width="750" height="938" src="http://creek.themebucket.net/wp-content/uploads/2015/09/7.jpg" class="attachment-creek-masonry-750 wp-post-image" alt="7" /> <div class="portfolio-hover"> <div class="portfolio-description"> <h4>Amazing Blog</h4> <div><p>A blog (a truncation of the expression weblog)[1] is a discussion or informational site published &#8230;</p>
</div> </div> </div> </a> </div> <div class="post-1442 type-portfolio status-publish has-post-thumbnail hentry portfolio-tag-creative portfolio-tag-web portfolio-item"> <a href="http://creek.themebucket.net/portfolio/bootstrap-3/" class="thumb"> <img width="750" height="469" src="http://creek.themebucket.net/wp-content/uploads/2015/09/9.jpg" class="attachment-creek-masonry-750 wp-post-image" alt="9" /> <div class="portfolio-hover"> <div class="portfolio-description"> <h4>Bootstrap 3+</h4> <div><p>Bootstrap is a free and open-source collection of tools for creating websites and web applications. &#8230;</p>
</div> </div> </div> </a> </div> <div class="post-1441 type-portfolio status-publish has-post-thumbnail hentry portfolio-tag-web portfolio-item"> <a href="http://creek.themebucket.net/portfolio/full-responsive/" class="thumb"> <img width="750" height="563" src="http://creek.themebucket.net/wp-content/uploads/2015/09/07c.jpg" class="attachment-creek-masonry-750 wp-post-image" alt="07c" /> <div class="portfolio-hover"> <div class="portfolio-description"> <h4>Full Responsive</h4> <div><p>A site layout example that adapts to browser viewport width was first demonstrated by Cameron &#8230;</p>
</div> </div> </div> </a> </div> <div class="post-1440 type-portfolio status-publish has-post-thumbnail hentry portfolio-tag-web portfolio-item"> <a href="http://creek.themebucket.net/portfolio/clean-code/" class="thumb"> <img width="750" height="469" src="http://creek.themebucket.net/wp-content/uploads/2015/09/6.jpg" class="attachment-creek-masonry-750 wp-post-image" alt="6" /> <div class="portfolio-hover"> <div class="portfolio-description"> <h4>Clean Code</h4> <div><p>Many computer programs remain in use for far longer than the original authors ever envisaged &#8230;</p>
</div> </div> </div> </a> </div> </div> <!--pagination--> <div class="text-center pagination-row"> <ul class="pagination custom-pagination"> <li> <a href="#" id="portfolio-loader" data-items="8" data-image-size="creek-masonry-750" title="Load More Portfolios"> <i class="fa fa-repeat"></i> <span class="screen-reader-text">Load More Portfolios</span> </a> </li> </ul> </div> <!--pagination--> </div>
</div>
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="auth-txt gray-bg"> <div class="media"> <div class="media-left plr30"> <img class="media-object" src="http://creek.themebucket.net/wp-content/uploads/2015/09/ava-1.png" alt="we’re creek for your portfolio"> </div> <div class="media-body v-mid pr30"> <h4 class="text-uppercase">we’re creek for your portfolio</h4> <p>Work hard for what you want because it won't come to you without a fight. You have to be strong and courageous and know that you can do anything you put your mind to. If somebody puts you down or criticizes you, just keep on believing in yourself and turn it into something positive.</p> </div> </div> </div> </div> </div>
</div>
</div> </section> <!--content section end--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio Hover Style - Script Codes CSS Codes

.portfolio-wrapper { overflow: hidden;
}
.portfolio-wrapper > .row { margin-left: -20px; margin-right: -20px;
}
.portfolio-filter { margin:0px; padding: 0px; list-style: none;
}
.portfolio-filter li { display: inline-block;
}
.portfolio-filter li a { color: #a9a8a8; margin: 0 15px; text-transform: uppercase; font-size: 12px; letter-spacing: 1px;
}
.portfolio-filter li a:hover,
.portfolio-filter li.active a,
.f-link li a:hover,
.f-link li.active a{ color: #222222;
}
/*----------------------------*/
.portfolio { margin: 50px 0 80px 0;
}
.portfolio .portfolio-item { float: left;
}
.portfolio .portfolio-item .thumb { position: relative; display: block;
}
.portfolio .portfolio-item .thumb img{ width: 100%; height: auto; display: block;
}
.portfolio-hover { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: 0; background-color: rgba(0, 0, 0, 0.60); opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; overflow: hidden;
}
.portfolio-item:hover .portfolio-hover,
.portfolio-item:hover .portfolio-hover .portfolio-description,
.portfolio-item:hover .portfolio-hover .action-btn { opacity: 1; filter: alpha(opacity=100);
}
.portfolio-item:hover .portfolio-hover .portfolio-description { top: 50%; /*margin-bottom: -90px;*/
}
.portfolio-hover .portfolio-description { position: absolute; top: 0%; left: 0; width: 100%; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(-55%); -ms-transform: translateY(-55%); transform: translateY(-55%); -webkit-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; padding: 10%;
}
.portfolio-description,
.portfolio-description h4,
.portfolio-description h4 a,
.portfolio-hover .action-btn a { /*text-align: center;*/ color: #fff;
}
.portfolio-description h4 { margin-bottom: 15px; font-size: 14px; text-transform: uppercase; font-weight: 800; letter-spacing: 1px;
}
.portfolio-description p { font-size:12px; margin-bottom: 0; font-weight: normal; color: #fff; line-height: 20px;
}
.portfolio-description a,
.portfolio-title a { color: #fff;
}
/*gutter*/
.portfolio.gutter .portfolio-item { padding: 20px;
}
/*portfolio 2 grid*/
.portfolio.col-2 .portfolio-item { width: 49.99%;
}
/*portfolio 3 grid*/
.portfolio.col-3 .portfolio-item { width: 33.3333333%;
}
/*portfolio 4 grid*/
.portfolio.col-4 .portfolio-item { width: 24.98%;
}
/*portfolio 5 grid*/
.portfolio.col-5 .portfolio-item { width: 19.99%;
}
/*portfolio 6 grid*/
.portfolio.col-6 .portfolio-item { width: 16.666666667%;
}
/* ---------------------------------------------------------------- Isotope Filtering
-----------------------------------------------------------------*/
.isotope-item { z-index: 2;
}
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1;
}
/*Isotope CSS3 transitions */
.isotope,
.isotope .isotope-item { -webkit-transition-duration: 0.8s; transition-duration: 0.8s;
}
.isotope { -webkit-transition-property: height, width; transition-property: height, width;
}
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; transition-property: transform, opacity;
}
/*disabling Isotope CSS3 transitions */
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; transition-duration: 0s;
}
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling { -webkit-transition: none; transition: none;
}
/*-------------------------------------- portfolio details
--------------------------------------*/
.fit-img img { width: 100%; height: auto; margin-bottom: 20px;
}
.p-list { padding: 0; list-style: none; margin-bottom: 40px;
}
.p-list li { display: block; line-height: 25px; margin-bottom: 5px;
}
.p-list li span { width: 115px; display: inline-block; text-transform: uppercase; color: #222; font-weight: bold; font-size: 12px;
}
.p-list li div.s-link,
.p-list li div.s-link a{ display: inline-block;
}
.p-list li div.s-link a { color: #cdcdcd; margin: 0 5px;
}
.p-list li div.s-link a:hover { color: #222;
}
.img-info { color: #9b9b9b; margin-bottom: 50px; display: block; font-size: 13px; font-style: italic;
}
.social-share a { margin: 0 10px; color: #7c7c7c; text-transform: uppercase; font-size: 13px;
}
.social-share a i{ margin-right: 10px; color: #222; font-size: 16px;
}
/*-------------------------------------- pagination
--------------------------------------*/
.pagination-row { display: inline-block; width: 100%;
}
.custom-pagination { margin-bottom: 80px;
}
.custom-pagination li a { width: 80px;
}
.custom-pagination li a i { font-size: 20px;
}
.custom-pagination>li>a, .custom-pagination>li>span{ border: none;
}
.custom-pagination>li:first-child>a, .custom-pagination>li:first-child>span,
.custom-pagination>li:last-child>a, .custom-pagination>li:last-child>span{ border-radius: 0;
}
.custom-pagination>li>a, .custom-pagination>li>span { padding: 17px 20px; margin-left: 10px; color: #222; text-decoration: none; background-color: #fff; border: 1px solid #F6F6F8;
}
.custom-pagination>li>a:hover { color: #fff;
}
.custom-pagination>.active>a,
.custom-pagination>.active>a:focus,
.custom-pagination>.active>a:hover,
.custom-pagination>li>a:hover,
.custom-pagination>.active>span,
.custom-pagination>.active>span:focus,
.custom-pagination>.active>span:hover { background: #252525; border-color: #252525;
}

Portfolio Hover Style - Script Codes JS Codes

var $portfolio = $('.portfolio'); if ($.fn.imagesLoaded && $portfolio.length > 0) { imagesLoaded($portfolio, function () { $portfolio.isotope({ itemSelector: '.portfolio-item', filter: '*' }); $(window).trigger("resize"); }); } $('.portfolio-filter').on('click', 'a', function (e) { e.preventDefault(); $(this).parent().addClass('active').siblings().removeClass('active'); var filterValue = $(this).attr('data-filter'); $portfolio.isotope({filter: filterValue}); });
// $('#portfolio-loader').on('click', function(e) { e.preventDefault(); var handler = $(this); handler.find('i').removeClass('fa-repeat').addClass('fa-spinner tb-spinner'); $.get( creek.ajax_url, { action: 'get_portfolio', offset: $portfolio.find('.portfolio-item').length, items: handler.data('items'), image_size: handler.data('image-size') }, function( data ) { $portfolio = $('.portfolio'); handler.find('i').removeClass('fa-spinner tb-spinner').addClass('fa-repeat'); var items = $(data); $portfolio.append(items); $portfolio.imagesLoaded(function(){ $portfolio.isotope('appended',items); $(window).trigger('resize'); }); if(items.length < handler.data('items')) { handler.find('i').parent().hide(); } } ); });
Portfolio Hover Style - Script Codes
Portfolio Hover Style - Script Codes
Home Page Home
Developer Siful Islam
Username sifulislam
Uploaded January 30, 2023
Rating 4.5
Size 5,140 Kb
Views 4,048
Do you need developer help for Portfolio Hover Style?

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!

Siful Islam (sifulislam) Script Codes
Name
Animate a Border Below a Horizontal Nav Item from Left to Right
Percentage preloader
Material Contact Form
Search bar width increase on click
Owl Carousel - Navigation buttons on sides
Google map search only
Progress bar css
Overflow scroll Y left
Gradient Background svg wave shape
Progress bar drug
Create amazing blog posts with AI!

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!