You are here

image-hover-effects.css in Image Hover Effects 7

Same filename and directory in other branches
  1. 8 css/image-hover-effects.css
.ihe-overlay{display:block;position:relative;z-index:0;text-align:center;overflow:hidden}.ihe-overlay img{border:none !important;margin:0 !important;padding:0 !important;max-width:100% !important}.ihe-overlay:before{content:' ';display:block;position:absolute;top:0;left:0;background-color:#000;opacity:0;width:100%;height:100%;z-index:5}.ihe-overlay:before,.ihe-overlay:after,.ihe-overlay img{transition:all 0.15s;transition-timing-function:ease-out}.ihe-overlay:hover:before,.ihe-overlay:hover:after,.ihe-overlay:hover img{transition:all 0.15s;transition-timing-function:ease-in-out}.ihe-overlay--zoom:hover img{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3)}.ihe-overlay--zoom-in:before{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.ihe-overlay--zoom-in:hover:before{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.ihe-overlay--fade-in-down:before{max-height:0}.ihe-overlay--fade-in-down:hover:before{max-height:100%}.ihe-overlay--fade-in-left:before{max-width:0}.ihe-overlay--fade-in-left:hover:before{max-width:100%}.ihe-overlay--fade-in-right:before{max-width:0;left:auto;right:0}.ihe-overlay--fade-in-right:hover:before{max-width:100%}.ihe-overlay--fade-in-up:before{max-height:0;top:auto;bottom:0}.ihe-overlay--fade-in-up:hover:before{max-height:100%}.ihe-overlay:hover:before{opacity:0.20}.ihe-overlay:after{content:'+';content:attr(data-hover);font-size:4em;color:#fff;opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;line-height:1em;z-index:6;text-align:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.ihe-overlay--zoom-in:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.ihe-overlay--zoom-in:hover:after{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.ihe-overlay--fade-in-down:after{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.ihe-overlay--fade-in-down:hover:after{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.ihe-overlay--fade-in-left:after{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.ihe-overlay--fade-in-left:hover:after{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.ihe-overlay--fade-in-right:after{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);left:auto}.ihe-overlay--fade-in-right:hover:after{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.ihe-overlay--fade-in-up:after{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.ihe-overlay--fade-in-up:hover:after{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.ihe-overlay:hover:after{opacity:1}

File

css/image-hover-effects.css
View source
  1. .ihe-overlay{display:block;position:relative;z-index:0;text-align:center;overflow:hidden}.ihe-overlay img{border:none !important;margin:0 !important;padding:0 !important;max-width:100% !important}.ihe-overlay:before{content:' ';display:block;position:absolute;top:0;left:0;background-color:#000;opacity:0;width:100%;height:100%;z-index:5}.ihe-overlay:before,.ihe-overlay:after,.ihe-overlay img{transition:all 0.15s;transition-timing-function:ease-out}.ihe-overlay:hover:before,.ihe-overlay:hover:after,.ihe-overlay:hover img{transition:all 0.15s;transition-timing-function:ease-in-out}.ihe-overlay--zoom:hover img{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3)}.ihe-overlay--zoom-in:before{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.ihe-overlay--zoom-in:hover:before{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.ihe-overlay--fade-in-down:before{max-height:0}.ihe-overlay--fade-in-down:hover:before{max-height:100%}.ihe-overlay--fade-in-left:before{max-width:0}.ihe-overlay--fade-in-left:hover:before{max-width:100%}.ihe-overlay--fade-in-right:before{max-width:0;left:auto;right:0}.ihe-overlay--fade-in-right:hover:before{max-width:100%}.ihe-overlay--fade-in-up:before{max-height:0;top:auto;bottom:0}.ihe-overlay--fade-in-up:hover:before{max-height:100%}.ihe-overlay:hover:before{opacity:0.20}.ihe-overlay:after{content:'+';content:attr(data-hover);font-size:4em;color:#fff;opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;line-height:1em;z-index:6;text-align:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.ihe-overlay--zoom-in:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.ihe-overlay--zoom-in:hover:after{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.ihe-overlay--fade-in-down:after{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.ihe-overlay--fade-in-down:hover:after{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.ihe-overlay--fade-in-left:after{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.ihe-overlay--fade-in-left:hover:after{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.ihe-overlay--fade-in-right:after{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);left:auto}.ihe-overlay--fade-in-right:hover:after{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.ihe-overlay--fade-in-up:after{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.ihe-overlay--fade-in-up:hover:after{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.ihe-overlay:hover:after{opacity:1}