@charset "utf-8"; /* CSS Document */ .ih-item.square.effect6 { overflow: hidden; } .ih-item.square.effect6.colored .info { background: #1a4a72; background: rgba(26, 74, 114, 0.6); } .ih-item.square.effect6.colored .info h3 { background: rgba(12, 34, 52, 0.6); } .ih-item.square.effect6 .img { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih-item.square.effect6 .info { background: #333333; background: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih-item.square.effect6 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 150px 0 0 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih-item.square.effect6 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; -webkit-transition: all 0.35s 0.1s linear; -moz-transition: all 0.35s 0.1s linear; transition: all 0.35s 0.1s linear; } .ih-item.square.effect6 a:hover .img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .ih-item.square.effect6 a:hover .info { visibility: visible; opacity: 1; } .ih-item.square.effect6.from_top_and_bottom .info h3 { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih-item.square.effect6.from_top_and_bottom .info p { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih-item.square.effect6.from_top_and_bottom a:hover .info h3, .ih-item.square.effect6.from_top_and_bottom a:hover .info p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih-item.square.effect6.top_to_bottom .info h3 { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih-item.square.effect6.top_to_bottom .info p { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih-item.square.effect6.top_to_bottom a:hover .info h3, .ih-item.square.effect6.top_to_bottom a:hover .info p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih-item.square.effect7 { overflow: hidden; } .ih-item.square.effect7.colored .info { background: #1a4a72; background: rgba(26, 74, 114, 0.6); } .ih-item.square.effect7.colored .info h3 { background: rgba(12, 34, 52, 0.6); } .ih-item.square.effect7 .img { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih-item.square.effect7 .info { background: #333333; background: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih-item.square.effect7 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 30px 0 0 0; -webkit-transform: scale(4); -moz-transform: scale(4); -ms-transform: scale(4); -o-transform: scale(4); transform: scale(4); -webkit-transition: all 0.35s 0.1s ease-in-out; -moz-transition: all 0.35s 0.1s ease-in-out; transition: all 0.35s 0.1s ease-in-out; } .ih-item.square.effect7 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; -webkit-transform: scale(5); -moz-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); -webkit-transition: all 0.35s 0.3s linear; -moz-transition: all 0.35s 0.3s linear; transition: all 0.35s 0.3s linear; } .ih-item.square.effect7 a:hover .img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .ih-item.square.effect7 a:hover .info { visibility: visible; opacity: 1; } .ih-item.square.effect7 a:hover .info h3, .ih-item.square.effect7 a:hover .info p { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .col-sm-6 { width: 50%} .ih-item.square {position: relative;width:350px; height:230px;float:left; margin:0 8px; background:#fff;} .ih-item.square .info { position: absolute;top: 0; bottom: 0; left: 0;right: 0;text-align: center;-webkit-backface-visibility: hidden;backface-visibility: hidden;} .img div{ width:350px; height:230px;} .img div img{ width:350px; height:230px;}