Animation : Transition & Transform
David LAURENT | TMI | Webinnov™
Code HTML
![]()
![]()
Je suis TMI
Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia, mundo cognita civitas.Code CSS
a { color: #545454; cursor:pointer; text-decoration: none; transition-property: color; transition-duration: 0.2s; transition-timing-function: linear; } .tmi-member-box .box-header { text-align: center; position:absolute; top:0; left:0; } .tmi-content-wrap { background-color: #fff; position: relative; overflow: hidden; margin: 0; padding: 6px 8px 6px 6px; border: solid 1px #ccc; border-bottom: solid 1px #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .tmi-content-hover .tmi-content-wrap img { height: 100%; object-fit: cover; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.5s ease-in 0s; -moz-transition: all 0.5s ease-in 0s; -o-transition: all 0.5s ease-in 0s; -ms-transition: all 0.5s ease-in 0s; transition: all 0.5s ease-in 0s; width: 100%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .tmi-content-hover .tmi-content-wrap:hover img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .tmi-content-hover .tmi-info { align-items: center; background-color: rgba(255, 255, 255, 0.9); border: 1px solid #f4f4f4; bottom: 0; color: #343434; display: flex; flex-wrap: wrap; left: 0; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); padding: 15px; place-content: center; position: absolute; right: 0; top: 0; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.3s ease-in 0s; -moz-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; -ms-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .tmi-content-hover .tmi-content-wrap:hover .tmi-info { opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .tmi-content-hover .tmi-info .tmi-info-text { opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(50%); -webkit-transition: all 0.5s ease-in 0s; -moz-transition: all 0.5s ease-in 0s; -o-transition: all 0.5s ease-in 0s; -ms-transition: all 0.5s ease-in 0s; transition: all 0.5s ease-in 0s; width: 100%; } .tmi-content-hover .tmi-info .social-links { margin: 0; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); padding: 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 0.5s ease-in 0s; -moz-transition: all 0.5s ease-in 0s; -o-transition: all 0.5s ease-in 0s; -ms-transition: all 0.5s ease-in 0s; transition: all 0.5s ease-in 0s; width: 100%; } .tmi-content-hover .tmi-content-wrap:hover .tmi-info .tmi-info-text, .tmi-content-hover .tmi-content-wrap:hover .tmi-info .social-links { opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); }