Hover Styles
Different predefined Hover styles for you to choose from. Select one of them or add your own unique style to your gallery.
.wrap-kol {
margin-top: 100px;
}
.select-option {
text-align: right;
margin-top: 40px;
margin-bottom: 40px;
}
.select-option select {
border-radius: 5px;
padding: 10px;
width: 100%;
margin-bottom: 10px;
}
.wrap-kol [class^='imghvr-'], .wrap-kol [class*=' imghvr-'] {
border-radius: 10px;
box-shadow: 0 20px 15px -10px rgb(0 0 0/0.3);
}
.wrap-kol [class^=imghvr-] figcaption, .wrap-kol [class*=' imghvr-'] figcaption, [class^=imghvr-reveal-]:before, [class*=' imghvr-reveal-']:before,.wrap-kol [class^='imghvr-border-'] {
background-color: #4242ce;
}
[class^=imghvr-strip-shutter]:before, [class^=imghvr-strip-shutter]:after, [class^=imghvr-strip-shutter] figcaption:before, [class^=imghvr-strip-shutter] figcaption:after, [class*=' imghvr-strip-shutter']:before, [class*=' imghvr-strip-shutter']:after, [class*=' imghvr-strip-shutter'] figcaption:before, [class*=' imghvr-strip-shutter'] figcaption:after, [class^=imghvr-pixel]:before, [class^=imghvr-pixel]:after, [class^=imghvr-pixel] figcaption:before, [class^=imghvr-pixel] figcaption:after, [class*=' imghvr-pixel']:before, [class*=' imghvr-pixel']:after, [class*=' imghvr-pixel'] figcaption:before, [class*=' imghvr-pixel'] figcaption:after, *[class^=imghvr-book-open-]:hover figcaption:before, *[class^=imghvr-book-open-]:hover figcaption:after, *[class*=' imghvr-book-open-']:hover figcaption:before, *[class*=' imghvr-book-open-']:hover figcaption:after, [class^=imghvr-blocks]:before, [class^=imghvr-blocks]:after, [class^=imghvr-blocks] figcaption:before, [class^=imghvr-blocks] figcaption:after, [class*=' imghvr-blocks']:before, [class*=' imghvr-blocks']:after, [class*=' imghvr-blocks'] figcaption:before, [class*=' imghvr-blocks'] figcaption:after, [class^=imghvr-blinds]:before, [class^=imghvr-blinds]:after, [class^=imghvr-blinds] figcaption:before, [class^=imghvr-blinds] figcaption:after, [class*=' imghvr-blinds']:before, [class*=' imghvr-blinds']:after, [class*=' imghvr-blinds'] figcaption:before, [class*=' imghvr-blinds'] figcaption:after,[class^=imghvr-strip-horiz]:before, [class^=imghvr-strip-horiz]:after, [class^=imghvr-strip-horiz] figcaption:before, [class^=imghvr-strip-horiz] figcaption:after, [class*=' imghvr-strip-horiz']:before, [class*=' imghvr-strip-horiz']:after, [class*=' imghvr-strip-horiz'] figcaption:before, [class*=' imghvr-strip-horiz'] figcaption:after {
background-color: #4242ce;
}
.wrap-kol [class^=imghvr-strip-] figcaption, .wrap-kol [class^=imghvr-pixel-] figcaption, [class*=' imghvr-pixel'] figcaption, .wrap-kol [class^=imghvr-border-] figcaption, *[class^=imghvr-book-open-] figcaption, *[class*=' imghvr-book-open-'] figcaption, [class^=imghvr-blocks] figcaption, [class*=' imghvr-blocks'] figcaption, [class^=imghvr-blinds] figcaption, [class*=' imghvr-blinds'] figcaption {
background-color: transparent !important;
}
.image-effect {
position: relative;
display: inline-block;
opacity: 0.3;
margin-right: 15px;
margin-bottom: 15px;
}
.image-effect.active {
opacity: 1;
}
.image-effect:hover {
cursor: pointer;
}
.effect-title {
text-align: center;
font-size: 14px;
color: #333333;
}
.image-effect.active .effect-title {
font-weight: bold;
}
.row-fx {
margin-bottom: 20px;
}
.img-sprite {
background-repeat: no-repeat !important;
height: 95px;
width: 87px;
margin: auto;
margin-bottom: 10px;
}
#zoom {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) 0 0;
}
#throw {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -92px 0;
}
#strip {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -184px 0;
}
#stack {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -276px 0;
}
#slide {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -367px 0;
}
#shutterout {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -459px 0;
}
#shutterin {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -552px 0;
}
#shift {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -644px 0;
}
/* second row fx */
#reveal {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) 0 -100px;
}
#push {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -92px -100px;
}
#pixel {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -184px -100px;
}
#pivot {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -276px -100px;
}
#lightspeed {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -368px -100px;
}
#imagezoom {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -460px -100px;
}
#hinge {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -552px -100px;
}
#gradient {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -644px -100px;
}
/* third row fx */
#fold {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) 0 -200px;
}
#flip {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -92px -200px;
}
#fallaway {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -184px -200px;
}
#fade {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -276px -200px;
}
#dive {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -367px -200px;
}
#cube {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -460px -200px;
}
#circle {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -552px -200px;
}
#bounce {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -644px -200px;
}
/* fourth row fx */
#borderreveal {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) 0 -300px;
}
#bookopen {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -92px -300px;
}
#blur {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -184px -300px;
}
#block {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -276px -300px;
}
#blinds {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -367px -300px;
}
.ta-color-pick {
border: 1px solid #ddd;
padding: 8px 10px;
background-color: transparent !important;
width: 100%;
margin-bottom: 10px;
text-align: left;
}
.ta-color-pick span.text {
display: inline-flex;
vertical-align: middle;
font-size: 14px;
margin-left: 5px;
color: #ffffff;
}
.ta-color-pick .sp-dd, .porto-full-image-style ul.fact-list {
display: none;
}
.effect-title {
color: #ffffff;
}
@media (max-width: 767px) {
.wrap-kol {
margin-top: 60px;
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
.wrap-kol .col-span-9 {
order: 2;
}
.wrap-kol .col-span-3 {
order: 1;
}
.wrap-kol .col-span-9 {
text-align: center;
}
}
@media (max-width: 640px) {
.select-option {
text-align: center;
}
.wrap-kol .col-span-9 {
grid-column: span 12/span 12;
margin-left: 50px;
}
.effect-title {
font-size: 13px;
}
.sisa-kolom {
grid-column: span 12/span 12;
padding: 0 20px;
}
}
@media (max-width: 480px) {
.wrap-kol .col-span-9 {
margin-left: 20px;
}
}
Zoom
Throw
Strip
Stack
Slide
Shoutter Out
Shoutter In
Shift
Reveal
Push
Pixel
Pivot
Light Speed
Image Zoom
Hinge
Gradient
Fold
Flip
Fall Away
Fade
Dive
Cube
Circle
Bounce
Border Reveal
Book Open
Blur
Block
Blinds
.style-enam .team-count-1 [class^='imghvr-'] figcaption:after, .style-enam .team-count-1 [class*=' imghvr-'] figcaption:after { background-color: }
Zoom In
Zoom Out
Zoom Out Up
Zoom Out Down
Zoom Out Left
Zoom Out Right
Zoom Out Flip Horizontal
Zoom Out Flip Vertical
Background
Text
(function($) {
'use strict';
$(window).load(function() {
// Model
var model = new Backbone.Model({
effect: '',
effectfx: ''
});
// View
model.on('change:effect', function(){
// the select fx first row
var theZoom = 'Zoom In' +
'Zoom Out' +
'Zoom Out Up' +
'Zoom Out Down' +
'Zoom Out Left' +
'Zoom Out Right' +
'Zoom Out Flip Horizontal' +
'Zoom Out Flip Vertical';
var theThrow = 'Throw In Up' +
'Throw In Down' +
'Throw In Left' +
'Throw In Right' +
'Throw Out Up' +
'Throw Out Down' +
'Throw Out Left' +
'Throw Out Right';
var theStrip = 'Strip Shutter Up' +
'Strip Shutter Down' +
'Strip Shutter Left' +
'Strip Shutter Right' +
'Strip Horizontal Up' +
'Strip Horizontal Down' +
'Strip Horizontal Top Left' +
'Strip Horizontal Top Right' +
'Strip Horizontal Bottom Left' +
'Strip Horizontal Bottom Right' +
'Strip Vertical Left' +
'Strip Vertical Right' +
'Strip Vertical Top Left' +
'Strip Vertical Top Right' +
'Strip Vertical Bottom Left' +
'Strip Vertical Bottom Right';
var theStack = 'Stack Up' +
'Stack Down' +
'Stack Left' +
'Stack Right';
var theSlide = 'Slide Up' +
'Slide Down' +
'Slide Left' +
'Slider Right' +
'Slide Top Left' +
'Slide Top Right' +
'Slide Bottom Left' +
'Slide Bottom Right';
var theShutterin = 'Shutter In Horizontal' +
'Shutter In Vertical' +
'Shutter In Out Horizontal' +
'Shutter In Out Vertical' +
'Shutter In Out Diagonal 1' +
'Shutter In Out Diagonal 2';
var theShutterout = 'Shutter Out Horizontal' +
'Shutter Out Vertical' +
'Shutter Out Diagonal 1' +
'Shutter Out Diagonal 2';
var theShift = 'Shift Top Left' +
'Shift Top Right' +
'Shift Bottom Left' +
'Shift Bottom Right';
// the select fx second row
var theReveal = 'Reveal Up' +
'Reveal Down' +
'Reveal Left' +
'Reveal Right' +
'Reveal Top-Left' +
'Reveal Top-Right' +
'Reveal Bottom-Left' +
'Reveal Bottom-Right';
var thePush = 'Push Up' +
'Push Down' +
'Push Left' +
'Push Right';
var thePixel = 'Pixel Up' +
'Pixel Down' +
'Pixel Left' +
'Pixel Right' +
'Pixel Top Left' +
'Pixel Top Right' +
'Pixel Bottom Left' +
'Pixel Bottom Right';
var thePivot = 'Pivot In Top Left' +
'Pivot In Top Right' +
'Pivot In Bottom Left' +
'Pivot In Bottom Right' +
'Pivout Out Top Left' +
'Pivout Out Top Right' +
'Pivot Out Bottom Left' +
'Pivot Out Bottom Right';
var theLightspeed = 'Lightspeed In Left' +
'Lightspeed In Right' +
'Lightspeed Out Left' +
'Lightspeed Out Right';
var theImagezoom = 'Image Zoom Center' +
'Image Zoom Out' +
'Image Zoom Left' +
'Image Zoom Right';
var theHinge = 'Hinge Up' +
'Hinge Down' +
'Hinge Left' +
'Hinge Right';
var theGradient = 'Gradient Radial In' +
'Gradient Radial Out' +
'Gradient Up' +
'Gradient Down' +
'Gradient Left' +
'Gradient Right' +
'Gradient Top Left' +
'Gradient Top Right' +
'Gradient Bottom Left' +
'Gradient Bottom Right';
var theFold = 'Fold Up' +
'Fold Down' +
'Fold Left' +
'Fold Right' ;
var theFlip = 'Flip Horizontal' +
'Flip Vertical' +
'Flip Diagonal 1' +
'Flip Diagonal 2';
var theFallaway = 'Fall Away Horizontal' +
'Fall Away Vertical' +
'Fall Away CC' +
'Fall Away CCC';
var theFade = 'Fade' +
'Fade In Up' +
'Fade In Down' +
'Fade In Left' +
'Fade In Right';
var theDive = 'Dive' +
'Dive CC' +
'Dive CCC';
var theCube = 'Cube Up' +
'Cube Down' +
'Cube Left' +
'Cube Right';
var theCircle = 'Circle Up' +
'Circle Down' +
'Circle Left' +
'Circle Right' +
'Circle Top Left' +
'Circle Top Right' +
'Circle Bottom Left' +
'Circle Bottom Right';
var theBounce = 'Bounce In' +
'Bounce In Up' +
'Bounce In Down' +
'Bounce In Left' +
'Bounce In Right' +
'Bounce Out' +
'Bounce Out Up' +
'Bounce Out Down' +
'Bounce Out Left' +
'Bounce Out Right';
var theBorderreveal = 'Border Reveal' +
'Border Reveal Vertical' +
'Border Reveal Horizontal' +
'Border Reveal Corners 1' +
'Border Reveal Corners 2' +
'Border Reveal Top Left' +
'Border Reveal Top Right' +
'Border Reveal Bottom Left' +
'Border Reveal Bottom Right' +
'Border Reveal CC 1' +
'Border Reveal CCC 1' +
'Border Reveal CC 2' +
'Border Reveal CCC 2' +
'Border Reveal cc 3' +
'Border Reveal CCC 3';
var theBookopen = 'Book Open Horizontal' +
'Book Open Vertical' +
'Book Open Up' +
'Book Open Down' +
'Book Open Left' +
'Book Open Right';
var theBlur = 'Blur';
var theBlocks = 'Blocks Rotate Left' +
'Blocks Rotate Right' +
'Blocks Rotate In Left' +
'Blocks Rotate In Right' +
'Blocks In' +
'Blocks Out' +
'Blocks Float Up' +
'Blocks Float Down' +
'Blocks Float Left' +
'Blocks Float Right' +
'Blocks Zoom Top Left' +
'Blocks Zoom Top Right' +
'Blocks Zoom Bottom Left' +
'Blocks Zoom Bottom Right';
var theBlinds = 'Blinds Horizontal' +
'blinds Vertical' +
'Blinds Up' +
'Blinds Down' +
'Blinds Left' +
'Blinds Right';
// the effect
var parts = $('.special-team-post figure').attr('class').split(' ');
$('.special-team-post figure').removeClass();
// first row fx
if(model.get('effect') == 'zoom' || model.get('effect') == '') {
$('#select-effect').html(theZoom);
$('.special-team-post figure').addClass('imghvr-zoom-in');
}
else if(model.get('effect') == 'throw') {
$('#select-effect').html(theThrow);
$('.special-team-post figure').addClass('imghvr-throw-in-up');
}
else if(model.get('effect') == 'strip') {
$('#select-effect').html(theStrip);
$('.special-team-post figure').addClass('imghvr-strip-shutter-up');
}
else if(model.get('effect') == 'stack') {
$('#select-effect').html(theStack);
$('.special-team-post figure').addClass('imghvr-stack-up');
}
else if(model.get('effect') == 'slide') {
$('#select-effect').html(theSlide);
$('.special-team-post figure').addClass('imghvr-slide-up');
}
else if(model.get('effect') == 'shutterin') {
$('#select-effect').html(theShutterin);
$('.special-team-post figure').addClass('imghvr-shutter-in-horiz');
}
else if(model.get('effect') == 'shutterout') {
$('#select-effect').html(theShutterout);
$('.special-team-post figure').addClass('imghvr-shutter-out-horiz');
}
else if(model.get('effect') == 'shift') {
$('#select-effect').html(theShift);
$('.special-team-post figure').addClass('imghvr-shutter-out-horiz');
}
// second row fx
else if(model.get('effect') == 'reveal') {
$('#select-effect').html(theReveal);
$('.special-team-post figure').addClass('imghvr-reveal-up');
}
else if(model.get('effect') == 'push') {
$('#select-effect').html(thePush);
$('.special-team-post figure').addClass('imghvr-push-up');
}
else if(model.get('effect') == 'pixel') {
$('#select-effect').html(thePixel);
$('.special-team-post figure').addClass('imghvr-pixel-up');
}
else if(model.get('effect') == 'pivot') {
$('#select-effect').html(thePivot);
$('.special-team-post figure').addClass('imghvr-pivot-in-top-left');
}
else if(model.get('effect') == 'lightspeed') {
$('#select-effect').html(theLightspeed);
$('.special-team-post figure').addClass('imghvr-lightspeed-in-left');
}
else if(model.get('effect') == 'imagezoom') {
$('#select-effect').html(theImagezoom);
$('.special-team-post figure').addClass('imghvr-image-zoom-center');
}
else if(model.get('effect') == 'hinge') {
$('#select-effect').html(theHinge);
$('.special-team-post figure').addClass('imghvr-hinge-up');
}
else if(model.get('effect') == 'gradient') {
$('#select-effect').html(theGradient);
$('.special-team-post figure').addClass('imghvr-grad-radial-in');
}
else if(model.get('effect') == 'fold') {
$('#select-effect').html(theFold);
$('.special-team-post figure').addClass('imghvr-fold-up');
}
else if(model.get('effect') == 'flip') {
$('#select-effect').html(theFlip);
$('.special-team-post figure').addClass('imghvr-flip-horiz');
}
else if(model.get('effect') == 'fallaway') {
$('#select-effect').html(theFallaway);
$('.special-team-post figure').addClass('imghvr-fall-away-horiz');
}
else if(model.get('effect') == 'fade') {
$('#select-effect').html(theFade);
$('.special-team-post figure').addClass('imghvr-fade');
}
else if(model.get('effect') == 'dive') {
$('#select-effect').html(theDive);
$('.special-team-post figure').addClass('imghvr-dive');
}
else if(model.get('effect') == 'cube') {
$('#select-effect').html(theCube);
$('.special-team-post figure').addClass('imghvr-cube-up');
}
else if(model.get('effect') == 'circle') {
$('#select-effect').html(theCircle);
$('.special-team-post figure').addClass('imghvr-circle-up');
}
else if(model.get('effect') == 'bounce') {
$('#select-effect').html(theBounce);
$('.special-team-post figure').addClass('imghvr-bounce-in');
}
else if(model.get('effect') == 'borderreveal') {
$('#select-effect').html(theBorderreveal);
$('.special-team-post figure').addClass('imghvr-border-reveal');
}
else if(model.get('effect') == 'bookopen') {
$('#select-effect').html(theBookopen);
$('.special-team-post figure').addClass('imghvr-book-open-horiz');
}
else if(model.get('effect') == 'blur') {
$('#select-effect').html(theBlur);
$('.special-team-post figure').addClass('imghvr-blur');
}
else if(model.get('effect') == 'block') {
$('#select-effect').html(theBlocks);
$('.special-team-post figure').addClass('imghvr-blocks-rotate-left');
}
else if(model.get('effect') == 'blinds') {
$('#select-effect').html(theBlinds);
$('.special-team-post figure').addClass('imghvr-blinds-horiz');
}
});
model.on('change:effectfx', function(){
var parts = $('.special-team-post figure').attr('class').split(' ');
$('.special-team-post figure').removeClass();
$('.special-team-post figure').addClass(model.get('effectfx'));
});
// Controller
$('.image-effect').on('click', function(){
$('.image-effect').removeClass('active');
$(this).addClass('active');
var optVal = $(this).find('.img-sprite').attr('id');
model.set('effect', optVal);
});
$('#select-effect').on('change', function(){
var optValFx = $(this).val();
model.set('effectfx', optValFx);
});
});
}(jQuery));