Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .hovereffect {
- width: 100%;
- height: 100%;
- margin-block-end: 15%;
- float: center;
- overflow: hidden;
- position: relative;
- text-align: center;
- cursor: default;
- }
- .hovereffect .overlay {
- width: 65%;
- height: 100%;
- overflow: hidden;
- position: absolute;
- top: 0;
- left: 0;
- }
- .hovereffect img {
- margin-left: 38%;
- display: block;
- position: relative;
- }
- .hovereffect h2 {
- text-transform: uppercase;
- color: #fff;
- text-align: center;
- font-size: 17px;
- padding: 10px;
- }
- .hovereffect:hover h2 {
- opacity: 0;
- filter: alpha(opacity=0);
- -webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
- transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
- }
- .hovereffect a.info {
- display: inline-block;
- text-decoration: none;
- padding: 7px 14px;
- text-transform: uppercase;
- color: #fff;
- border: 1px solid #fff;
- margin: 50px 0 0 0;
- background-color: transparent;
- }
- .hovereffect a.info:hover {
- box-shadow: 0 0 5px #fff;
- }
- .hovereffect hr {
- width: 40%;
- opacity: 0;
- filter: alpha(opacity=0);
- border: 1px solid #FFF;
- }
- .hovereffect hr:nth-child(3) {
- -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,90deg) scale3d(0,0,1);
- transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,90deg) scale3d(0,0,1);
- }
- .hovereffect hr:nth-child(4) {
- -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,180deg) scale3d(0,0,1);
- transform: translate3d(-50%,-50%,0) rotate3d(0,0,1, 180deg) scale3d(0,0,1);
- }
- .hovereffect h2, .hovereffect hr {
- position: absolute;
- top: 50%;
- left: 75%;
- -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
- transition: opacity 0.35s, transform 0.35s;
- -webkit-transform: translate3d(-50%,-50%,0);
- transform: translate3d(-50%,-50%,0);
- -webkit-transform-origin: 50%;
- -ms-transform-origin: 50%;
- transform-origin: 50%;
- background-color: transparent;
- margin: 0px;
- }
- .set1, .set2 {
- left: 75%;
- position: absolute;
- -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
- transition: opacity 0.35s, transform 0.35s;
- -webkit-transform: translate3d(-50%,-50%,0);
- transform: translate3d(-50%,-50%,0);
- -webkit-transform-origin: 50%;
- -ms-transform-origin: 50%;
- transform-origin: 50%;
- background-color: transparent;
- margin: 0px;
- padding: 0px;
- }
- .set1 {
- top: 40%;
- }
- .set2 {
- top: 60%;
- }
- .hovereffect p {
- width: 30%;
- text-transform: none;
- font-size: 15px;
- line-height: 2;
- }
- .hovereffect p a {
- color: #fff;
- }
- .hovereffect p a:hover,
- .hovereffect p a:focus {
- opacity: 0.6;
- filter: alpha(opacity=60);
- }
- .hovereffect a i {
- opacity: 0;
- filter: alpha(opacity=0);
- -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
- transition: opacity 0.35s, transform 0.35s;
- padding: 10px;
- font-size: 20px;
- }
- .set1 a:first-child i {
- -webkit-transform: translate3d(-60px,-60px,0);
- transform: translate3d(-60px,-60px,0);
- }
- .set1 a:nth-child(2) i {
- -webkit-transform: translate3d(60px,-60px,0);
- transform: translate3d(60px,-60px,0);
- }
- .set2 a:first-child i {
- -webkit-transform: translate3d(-60px,60px,0);
- transform: translate3d(-60px,60px,0);
- }
- .set2 a:nth-child(2) i {
- -webkit-transform: translate3d(60px,60px,0);
- transform: translate3d(60px,60px,0);
- }
- .hovereffect:hover hr:nth-child(3) {
- opacity: 1;
- filter: alpha(opacity=100);
- -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-90deg) scale3d(1,1,1);
- transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-90deg) scale3d(1,1,1);
- }
- .hovereffect:hover hr:nth-child(4) {
- opacity: 1;
- filter: alpha(opacity=100);
- -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-180deg) scale3d(1,1,1);
- transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-180deg) scale3d(1,1,1);
- }
- .hovereffect:hover .set1 i:empty, .hovereffect:hover .set2 i:empty {
- -webkit-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- opacity: 1;
- filter: alpha(opacity=100);
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement