/* Item Name : CSS3 Image Hover Effects Vol.2 Author URI : http://codecanyon.net/user/Pixelworkshop/ Version : 1.0 */ /* TABLE OF CONTENTS 00 PAGE STYLING (REMOVABLE) 01 ZOOMING IN & OUT 02 FLIP HORIZONTAL, VERTICAL & DIAGONAL 03 FLIP BOOK 04 DUO SLIDES 05 OVERLAY TEXT 06 OVERLAY TEXT ALTERNATIVE 07 PANEL SLIDE 08 SHADOWS 09 SHAPES 10 IMAGE REFLECTION 11 IMAGE LABEL 12 PANEL ICONS 13 ZOOM BOX 14 SHINING IMAGE */ /* _______________________________________ 05 OVERLAY TEXT _______________________________________ */ .overlay_text { float: left; border: 5px solid #f5f5f5; overflow: hidden; position: relative; text-align: center; } .overlay_text img { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .overlay_text .overlay_text_mask { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s; } .overlay_text .overlay_text_mask a{ color:#fff !important; } /* Overlays Colors */ .overlay_text .white_mask { background: #ffffff; background: rgba(255,255,255,0.5); } .overlay_text .white_mask h2, .overlay_text .white_mask p { color: #000000; } .overlay_text .black_mask { background: #000000; background: rgba(0,0,0,0.5); } .overlay_text .black_mask h2, .overlay_text .black_mask p { color: #FFFFFF; } /* Overlays Texts */ .overlay_text h2, .overlay_text p { text-align: center; position: relative; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .overlay_text h2 { font-size: 24px; margin: 180px 0 0 0; } .overlay_text p { font-size: 12px; line-height:21px; color: #000000; padding: 10px 20px 20px; } /* Hover Events */ .overlay_text:hover img { } .overlay_text:hover .overlay_text_mask, .overlay_text:hover h2, .overlay_text:hover p { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .overlay_text:hover h2 { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; } .overlay_text:hover p { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; } /* Top / Bottom Animation */ .overlay_top_bottom h2 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); } .overlay_top_bottom p { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); } .overlay_top_bottom:hover h2, .overlay_top_bottom:hover p { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } /* Left / Right Animation */ .overlay_left_right h2 { -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -o-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } .overlay_left_right p { -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); } .overlay_left_right:hover h2, .overlay_left_right:hover p { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } /* _______________________________________ 06 OVERLAY TEXT ALTERNATIVE _______________________________________ */ .overlay_text_alt { width: 240px; height: 150px; margin: 15px; float: left; border: 5px solid #f5f5f5; overflow: hidden; position: relative; text-align: center; } .overlay_text_alt img { width: 100%; height: 100%; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .overlay_text_alt .overlay_text_alt_mask { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s; } /* Overlays Colors */ .overlay_text_alt .white_mask_alt { background-color: rgba(255,255,255,0.5); } .overlay_text_alt .white_mask_alt h2, .overlay_text_alt .white_mask_alt p { color: #000000; } .overlay_text_alt .black_mask_alt { background-color: rgba(0,0,0,0.5); } .overlay_text_alt .black_mask_alt h2, .overlay_text_alt .black_mask_alt p { color: #FFFFFF; } /* Overlays Texts */ .overlay_text_alt h2, .overlay_text_alt p { font-family: Georgia, serif; font-style:italic; text-align: center; position: relative; -webkit-transform-origin: top right; -moz-transform-origin: top right; -o-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .overlay_text_alt h2 { font-size: 18px; margin: 30px 0 0 0; } .overlay_text_alt p { font-size: 12px; line-height:21px; color: #000000; padding: 10px 20px 20px; } /* Hover Events */ .overlay_text_alt:hover img { -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } .overlay_text_alt:hover .overlay_text_alt_mask, .overlay_text_alt:hover h2, .overlay_text_alt:hover p { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .overlay_text_alt:hover h2 { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; } .overlay_text_alt:hover p { -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; }