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