Image Hover Alternatives (hover-border)

We’ve added these CSS code snippets as alternatives for the default built-in Hover Border effect on images within Kallyas theme. We tried avoiding adding an extra option with too much unused CSS so instead, below you can find a lot of effects with their CSS code.

To add a different effect, simply copy the CSS code of one of the effects you want, and simply paste into Kallyas options > Advanced > Custom CSS editor.



Classic Hover Border effect (already existing)#

.hoverBorder img {max-width:100%; box-sizing: border-box; border-radius: 2px; width: 100%; position: relative;}
.hoverBorder:hover img { border-radius:2px; opacity:0.8; }
.hoverBorder:after {content:''; position:absolute; left:0; top:0; bottom:0; right:0; border-radius:3px; box-shadow:0 0 0 3px rgba(255,255,255,0.15) inset; -webkit-transition: box-shadow 0.2s ease-out, background-color 0.2s ease-out; transition: box-shadow 0.2s ease-out, background-color 0.2s ease-out;}
.hoverBorder:hover:after { box-shadow:0 0 0 5px #cd2122 inset;}


No Hover#

/* Hover Border - No Hover */
.hoverBorder img {max-width:100%; box-sizing: border-box; width: 100%; position: relative; border-radius:0;}
.hoverBorder:hover img { opacity:1; }
.hoverBorder:after {display: none;}


Opacity In#

/* Hover Border - Opacity In */
.hoverBorder img {max-width:100%; box-sizing: border-box; width: 100%; position: relative; opacity:0.8;border-radius:0;}
.hoverBorder:hover img { opacity:1;}
.hoverBorder:after {display: none;}


Opacity Out#

/* Hover Border - Opacity Out */
.hoverBorder img {max-width:100%; box-sizing: border-box; width: 100%; position: relative; opacity:1;border-radius:0;}
.hoverBorder:hover img { opacity:0.8;}
.hoverBorder:after {display: none;}


Opacity In with Background#

/* Hover Border - Opacity In with Background */
.hoverBorder {background: #cd2122;}
.hoverBorder img {max-width:100%; box-sizing: border-box; width: 100%; position: relative; opacity:0.8;border-radius:0;}
.hoverBorder:hover img { opacity:1;}
.hoverBorder:after {display: none;}


Opacity Out with Background#

/* Hover Border - Opacity Out with Background */
.hoverBorder {background: #cd2122;}
.hoverBorder img {max-width:100%; box-sizing: border-box; width: 100%; position: relative; opacity:1;border-radius:0;}
.hoverBorder:hover img { opacity:0.8;}
.hoverBorder:after {display: none;}


Zoom In#

/* Hover Border - Zoom In */
.hoverBorder {overflow: hidden;}
.hoverBorder img { position: relative; -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-transition: -webkit-transform .15s ease-out; transition: -webkit-transform .15s ease-out; transition: transform .15s ease-out; transition:transform .15s ease-out, -webkit-transform .15s ease-out; opacity:1;border-radius:0;}
.hoverBorder:hover img { -webkit-transform:scale(1.05); -ms-transform:scale(1.05); transform:scale(1.05); opacity:1;}
.hoverBorder:after {display: none;}


Zoom Out#

/* Hover Border - Zoom Out */
.hoverBorder {overflow: hidden;}
.hoverBorder img { position: relative; -webkit-transform:scale(1.05); -ms-transform:scale(1.05); transform:scale(1.05); -webkit-transition: -webkit-transform .15s ease-out; transition: -webkit-transform .15s ease-out; transition: transform .15s ease-out; transition:transform .15s ease-out, -webkit-transform .15s ease-out; opacity:1;border-radius:0;}
.hoverBorder:hover img { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); opacity:1;}
.hoverBorder:after {display: none;}


Zoom In Rotate#

/* Hover Border - Zoom In Rotate */
.hoverBorder {overflow: hidden;}
.hoverBorder img { position: relative; -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-transition: -webkit-transform .15s ease-out; transition: -webkit-transform .15s ease-out; transition: transform .15s ease-out; transition:transform .15s ease-out, -webkit-transform .15s ease-out; opacity:1;border-radius:0;}
.hoverBorder:hover img {-webkit-transform:scale(1.1) rotate(2deg);-ms-transform:scale(1.1) rotate(2deg);transform:scale(1.1) rotate(2deg); opacity:1;}
.hoverBorder:after {display: none;}


Zoom Out Rotate In#

/* Hover Border - Zoom Out Rotate In */
.hoverBorder {overflow: hidden;}
.hoverBorder img { position: relative;  -webkit-transform:scale(1.1) rotate(2deg);  -ms-transform:scale(1.1) rotate(2deg);  transform:scale(1.1) rotate(2deg); -webkit-transition: -webkit-transform .15s ease-out; transition: -webkit-transform .15s ease-out; transition: transform .15s ease-out; transition:transform .15s ease-out, -webkit-transform .15s ease-out; opacity:1;border-radius:0;}
.hoverBorder:hover img { -webkit-transform:scale(1) rotate(0); -ms-transform:scale(1) rotate(0); transform:scale(1) rotate(0); opacity:1;}
.hoverBorder:after {display: none;}


Grayscale In#

/* Hover Border - Grayscale In */
.hoverBorder img { position: relative; -webkit-filter:grayscale(100%); filter:grayscale(100%); -webkit-transition: -webkit-filter .15s ease-out; transition: -webkit-filter .15s ease-out; transition: filter .15s ease-out; transition: filter .15s ease-out, -webkit-filter .15s ease-out; opacity:.9;border-radius:0;}
.hoverBorder:hover img {-webkit-filter:grayscale(0);filter:grayscale(0); opacity:1;}
.hoverBorder:after {display: none;}


Grayscale Out#

/* Hover Border - Grayscale Out */
.hoverBorder img { position: relative; -webkit-filter:grayscale(0); filter:grayscale(0); -webkit-transition: -webkit-filter .15s ease-out; transition: -webkit-filter .15s ease-out; transition: filter .15s ease-out; transition: filter .15s ease-out, -webkit-filter .15s ease-out; border-radius:0;}
.hoverBorder:hover img {-webkit-filter:grayscale(100%);filter:grayscale(100%); }
.hoverBorder:after {display: none;}


Blur In#

/* Hover Border - Blur In */
.hoverBorder {overflow: hidden;}
.hoverBorder img { position: relative; -webkit-filter:blur(3px); filter:blur(3px); -webkit-transition: -webkit-filter .15s ease-out; transition: -webkit-filter .15s ease-out; transition: filter .15s ease-out; transition: filter .15s ease-out, -webkit-filter .15s ease-out; opacity:.9;border-radius:0;}
.hoverBorder:hover img {-webkit-filter:blur(0);filter:blur(0); opacity:1;}
.hoverBorder:after {display: none;}


Blur Out#

/* Hover Border - Blur Out */
.hoverBorder {overflow: hidden;}
.hoverBorder img { position: relative; -webkit-filter:blur(0); filter:blur(0); -webkit-transition: -webkit-filter .15s ease-out; transition: -webkit-filter .15s ease-out; transition: filter .15s ease-out; transition: filter .15s ease-out, -webkit-filter .15s ease-out; opacity:.9; border-radius:0;}
.hoverBorder:hover img {-webkit-filter:blur(3px);filter:blur(3px); opacity:1;}
.hoverBorder:after {display: none;}


Flashing#

/* Hover Border - Flashing */
.hoverBorder:after {display: none;}
.hoverBorder:hover img {border-radius:0; opacity: 1; -webkit-animation: flash 1.5s; animation: flash 1.5s; }
@-webkit-keyframes flash {
	0% {opacity: .4; }
	100% {opacity: 1; }
}
@keyframes flash {
	0% {opacity: .4; }
	100% {opacity: 1; }
}


Bottom Border#

/* Hover Border - Bottom Border */
.hoverBorder img {border-radius:0;}
.hoverBorder:after {content:''; position:absolute; height:5px; opacity:1; left:0; top:auto; bottom:0; right:0; border-radius:0; box-shadow:none; -webkit-transition: height 0.2s ease-out, background-color 0.2s ease-out; transition: height 0.2s ease-out, background-color 0.2s ease-out; z-index: 1; background-color: rgba(255, 255, 255, 0.5);}
.hoverBorder:hover:after { box-shadow:none; height:10px; background-color:#cd2122; }