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; }
|