.view-second img { -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .view-second .mask { background-color: rgba(68,116,157, 0.8); width: 300px; padding: 60px; height: 300px; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: translate(265px, 145px) rotate(45deg); -moz-transform: translate(265px, 145px) rotate(45deg); -o-transform: translate(265px, 145px) rotate(45deg); -ms-transform: translate(265px, 145px) rotate(45deg); transform: translate(265px, 145px) rotate(45deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-second h4 { position: relative; left: 5px; text-shadow: 0px 1px 0 RGBA(0,0,0,0.3); border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 35px 40px 0px 40px; -webkit-transform: translate(200px, -200px); -moz-transform: translate(200px, -200px); -o-transform: translate(200px, -200px); -ms-transform: translate(200px, -200px); transform: translate(200px, -200px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .widget .view-second h4 { position: relative; left: -10px;} .view-second p { -webkit-transform: translate(-200px, 200px); -moz-transform: translate(-200px, 200px); -o-transform: translate(-200px, 200px); -ms-transform: translate(-200px, 200px); transform: translate(-200px, 200px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-second a.info { position: relative; left: 10px !important; -webkit-transform: translate(0px, 100px); -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); transform: translate(0px, 100px); -webkit-transition: all 0.2s 0.1s ease-in-out; -moz-transition: all 0.2s 0.1s ease-in-out; -o-transition: all 0.2s 0.1s ease-in-out; -ms-transition: all 0.2s 0.1s ease-in-out; transition: all 0.2s 0.1s ease-in-out; } .widget .view-second a.info { position: relative; left: -7px !important;} .view-second:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translate(-80px, -125px) rotate(45deg); -moz-transform: translate(-80px, -125px) rotate(45deg); -o-transform: translate(-80px, -125px) rotate(45deg); -ms-transform: translate(-80px, -125px) rotate(45deg); transform: translate(-80px, -125px) rotate(45deg); } .view-second:hover h4 { -webkit-transform: translate(0px,0px); -moz-transform: translate(0px,0px); -o-transform: translate(0px,0px); -ms-transform: translate(0px,0px); transform: translate(0px,0px); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; } .view-second:hover p { -webkit-transform: translate(0px,0px); -moz-transform: translate(0px,0px); -o-transform: translate(0px,0px); -ms-transform: translate(0px,0px); transform: translate(0px,0px); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } .view-second:hover a.info { position: relative; bottom: -5px; -webkit-transform: translate(0px,0px); -moz-transform: translate(0px,0px); -o-transform: translate(0px,0px); -ms-transform: translate(0px,0px); transform: translate(0px,0px); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; }