You are here

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

Same filename and directory in other branches
  1. 7 css/image-hover-effects.css
.ihe-overlay{display:block;position:relative;z-index:0;text-align:center}.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--fade-in:before{-webkit-transition:opacity 0.5s;-moz-transition:opacity 0.5s;-o-transition:opacity 0.5s;transition:opacity 0.5s}.ihe-overlay--zoom{overflow:hidden}.ihe-overlay--zoom img{-webkit-transition:-webkit-transform 0.5s;-moz-transition:-moz-transform 0.5s;-o-transition:-o-transform 0.5s;transition:transform 0.5s}.ihe-overlay--zoom:hover img{-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3)}.ihe-overlay--zoom-in:before{-webkit-transition:-webkit-transform 0.35s;-moz-transition:-moz-transform 0.35s;-o-transition:-o-transform 0.35s;transition:transform 0.35s;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.ihe-overlay--zoom-in:hover:before{-webkit-transition:-webkit-transform 0.35s;-moz-transition:-moz-transform 0.35s;-o-transition:-o-transform 0.35s;transition:transform 0.35s;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.ihe-overlay--fade-in-down:before{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;max-height:0}.ihe-overlay--fade-in-down:hover:before{max-height:100%}.ihe-overlay--fade-in-left:before{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;max-width:0}.ihe-overlay--fade-in-left:hover:before{max-width:100%}.ihe-overlay--fade-in-right:before{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;max-width:0;left:auto;right:0}.ihe-overlay--fade-in-right:hover:before{max-width:100%}.ihe-overlay--fade-in-up:before{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;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:50%;left:0;width:100%;height:1em;line-height:1em;margin-top:-0.5em;z-index:6;text-align:center}.ihe-overlay--fade-in:after{-webkit-transition:opacity 0.5s;-moz-transition:opacity 0.5s;-o-transition:opacity 0.5s;transition:opacity 0.5s}.ihe-overlay--zoom-in:after{-webkit-transition:-webkit-transform 0.35s;-moz-transition:-moz-transform 0.35s;-o-transition:-o-transform 0.35s;transition:transform 0.35s;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.ihe-overlay--zoom-in:hover:after{-webkit-transition:-webkit-transform 0.35s;-moz-transition:-moz-transform 0.35s;-o-transition:-o-transform 0.35s;transition:transform 0.35s;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.ihe-overlay--fade-in-down:after{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;top:0}.ihe-overlay--fade-in-down:hover:after{top:50%}.ihe-overlay--fade-in-left:after{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;left:0}.ihe-overlay--fade-in-left:hover:after{left:50%}.ihe-overlay--fade-in-right:after{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;right:0;left:auto}.ihe-overlay--fade-in-right:hover:after{right:50%;margin-left:0;margin-right:-0.5em}.ihe-overlay--fade-in-up:after{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;bottom:0;top:auto}.ihe-overlay--fade-in-up:hover:after{bottom:50%;margin-bottom:-0.5em;margin-top: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}.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--fade-in:before{-webkit-transition:opacity 0.5s;-moz-transition:opacity 0.5s;-o-transition:opacity 0.5s;transition:opacity 0.5s}.ihe-overlay--zoom{overflow:hidden}.ihe-overlay--zoom img{-webkit-transition:-webkit-transform 0.5s;-moz-transition:-moz-transform 0.5s;-o-transition:-o-transform 0.5s;transition:transform 0.5s}.ihe-overlay--zoom:hover img{-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3)}.ihe-overlay--zoom-in:before{-webkit-transition:-webkit-transform 0.35s;-moz-transition:-moz-transform 0.35s;-o-transition:-o-transform 0.35s;transition:transform 0.35s;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.ihe-overlay--zoom-in:hover:before{-webkit-transition:-webkit-transform 0.35s;-moz-transition:-moz-transform 0.35s;-o-transition:-o-transform 0.35s;transition:transform 0.35s;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.ihe-overlay--fade-in-down:before{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;max-height:0}.ihe-overlay--fade-in-down:hover:before{max-height:100%}.ihe-overlay--fade-in-left:before{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;max-width:0}.ihe-overlay--fade-in-left:hover:before{max-width:100%}.ihe-overlay--fade-in-right:before{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;max-width:0;left:auto;right:0}.ihe-overlay--fade-in-right:hover:before{max-width:100%}.ihe-overlay--fade-in-up:before{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;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:50%;left:0;width:100%;height:1em;line-height:1em;margin-top:-0.5em;z-index:6;text-align:center}.ihe-overlay--fade-in:after{-webkit-transition:opacity 0.5s;-moz-transition:opacity 0.5s;-o-transition:opacity 0.5s;transition:opacity 0.5s}.ihe-overlay--zoom-in:after{-webkit-transition:-webkit-transform 0.35s;-moz-transition:-moz-transform 0.35s;-o-transition:-o-transform 0.35s;transition:transform 0.35s;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.ihe-overlay--zoom-in:hover:after{-webkit-transition:-webkit-transform 0.35s;-moz-transition:-moz-transform 0.35s;-o-transition:-o-transform 0.35s;transition:transform 0.35s;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.ihe-overlay--fade-in-down:after{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;top:0}.ihe-overlay--fade-in-down:hover:after{top:50%}.ihe-overlay--fade-in-left:after{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;left:0}.ihe-overlay--fade-in-left:hover:after{left:50%}.ihe-overlay--fade-in-right:after{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;right:0;left:auto}.ihe-overlay--fade-in-right:hover:after{right:50%;margin-left:0;margin-right:-0.5em}.ihe-overlay--fade-in-up:after{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;-o-transition:all 0.35s;transition:all 0.35s;bottom:0;top:auto}.ihe-overlay--fade-in-up:hover:after{bottom:50%;margin-bottom:-0.5em;margin-top:0}.ihe-overlay:hover:after{opacity:1}