Animation : Transition & Transform

17 mars 2019 in Ateliers, CSS

David LAURENT | TMI | Webinnov™

Code HTML

 

  • 01
    tmi

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

    Poster une réponse

    

    Copyright © 2015-2021 - Propulsé par  Webinnov.fr  - Contact : contact@webinnov.fr