Création effet zoom arrière sur image
David LAURENT | TMI | Webinnov™
Code HTML
Code CSS
img { height: auto; max-width: 100%; vertical-align: top; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } figure { margin: 0; padding: 6px 8px 6px 6px; border: solid 1px #ddd; border-bottom: solid 1px #ccc; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .tmi-link-image:hover { -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset; -webkit-transition: -webkit-box-shadow 1.2s ease-in-out; -moz-transition: box-shadow 0.7s ease-in-out; -o-transition: box-shadow 0.7s ease-in-out; transition: box-shadow 0.7s ease-in-out; opacity: 0.9; -ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity = 90); } .tmi-link-image { width: 540px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: absolute; top: 0; left:0; background-color: #fff; } .tmi-link-image .post-featured-image a:before { background-color: rgba(255, 255, 255, 0.3); bottom: 200px; content: ""; left: 200px; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); position: absolute; right: 200px; top: 200px; -webkit-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; -ms-transition: all 500ms ease-out; transition: all 500ms ease-out; z-index: 1; } .tmi-link-image .post-featured-image a:after { border: 1px solid rgba(255, 255, 255, 0.7); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: rgba(255, 255, 255, 0.7); content: '\f0c1'; font-family: "FontAwesome"; font-size: 20px; height: 50px; left: 0; margin: 0 auto; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); padding: 14px; position: absolute; right: 0; text-align: center; top: 30%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; vertical-align: middle; width: 50px; } .tmi-link-image .post-featured-image a:hover:before { bottom: 10px; left: 10px; right: 10px; top: 10px; opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); } .tmi-link-image .post-featured-image a:hover:after { opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); top: 50%; } .tmi-link-image .post-featured-image { /*margin-bottom: 10px;*/ overflow: hidden; position: relative; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .tmi-link-image .post-featured-image a img { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; -ms-transition: all 500ms ease-out; transition: all 500ms ease-out; } .tmi-link-image .post-featured-image a:hover img { -webkit-transform: scale(0.98); -moz-transform: scale(0.98); -o-transform: scale(0.98); -ms-transform: scale(0.98); transform: scale(0.98); }