91 lines
No EOL
2.1 KiB
Text
91 lines
No EOL
2.1 KiB
Text
/** Image Hover
|
|
**************************************************************** **/
|
|
.image-hover {
|
|
position:relative;
|
|
display:table;
|
|
}
|
|
.image-hover>img {
|
|
-webkit-transition: all 0.2s cubic-bezier(0.310, 0.100, 0.570, 1.000);
|
|
-moz-transition: all 0.2s cubic-bezier(0.310, 0.100, 0.570, 1.000);
|
|
-ms-transition: all 0.2s cubic-bezier(0.310, 0.100, 0.570, 1.000);
|
|
-o-transition: all 0.2s cubic-bezier(0.310, 0.100, 0.570, 1.000);
|
|
transition: all 0.2s cubic-bezier(0.310, 0.100, 0.570, 1.000);
|
|
}
|
|
.image-hover:hover>img {
|
|
/* IE 8 */
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
|
|
|
|
/* IE 5-7 */
|
|
filter: alpha(opacity=90);
|
|
|
|
/* Netscape */
|
|
-moz-opacity: 0.9;
|
|
|
|
/* Safari 1.x */
|
|
-khtml-opacity: 0.9;
|
|
|
|
/* Good browsers */
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.image-hover-icon {
|
|
position:absolute;
|
|
left:0; top:0;
|
|
bottom:0; right:0;
|
|
z-index:3;
|
|
|
|
/* IE 8 */
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
|
|
/* IE 5-7 */
|
|
filter: alpha(opacity=0);
|
|
|
|
/* Netscape */
|
|
-moz-opacity: 0;
|
|
|
|
/* Safari 1.x */
|
|
-khtml-opacity: 0;
|
|
|
|
/* Good browsers */
|
|
opacity: 0;
|
|
|
|
-webkit-transition: all 0.2s cubic-bezier(0.310, 0.100, 0.570, 1.000);
|
|
-moz-transition: all 0.2s cubic-bezier(0.310, 0.100, 0.570, 1.000);
|
|
-ms-transition: all 0.2s cubic-bezier(0.310, 0.100, 0.570, 1.000);
|
|
-o-transition: all 0.2s cubic-bezier(0.310, 0.100, 0.570, 1.000);
|
|
transition: all 0.2s cubic-bezier(0.310, 0.100, 0.570, 1.000);
|
|
}
|
|
.image-hover-icon.image-hover-dark {
|
|
background-color:rgba(0,0,0,0.3);
|
|
}
|
|
.image-hover-icon.image-hover-light {
|
|
background-color:rgba(255,255,255,0.3);
|
|
}
|
|
.image-hover-icon.image-hover-light>i {
|
|
color:#111;
|
|
}
|
|
.image-hover-icon>i {
|
|
font-size:40px;
|
|
position:absolute;
|
|
left:50%; top:50%;
|
|
margin-left:-15px;
|
|
margin-top:-15px;
|
|
z-index:2;
|
|
color:#fff;
|
|
}
|
|
.image-hover:hover>.image-hover-icon {
|
|
/* IE 8 */
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
|
|
/* IE 5-7 */
|
|
filter: alpha(opacity=100);
|
|
|
|
/* Netscape */
|
|
-moz-opacity: 1;
|
|
|
|
/* Safari 1.x */
|
|
-khtml-opacity: 1;
|
|
|
|
/* Good browsers */
|
|
opacity: 1;
|
|
} |