.kangcontainer {width:610px; height:750px; text-align:left; position:relative; overflow: hidden;} .kangmain {width:610px; height:750px; position:absolute; background:url(https://i.imgur.com/1uc1web.png); background-size: cover;} .kangsfondo {width:610px; height:750px; position:absolute; background:url(https://i.imgur.com/Bsbh0V7.jpg); animation: slide 10s linear infinite;} .kangsfondoalt {width:610px; height:750px; position:absolute; background:url(https://i.imgur.com/YDKl0zP.jpg); animation: slide 10s linear infinite; opacity:0; transition: all .50s ease-in-out;} .kanggradient {width:610px; height:750px; position:absolute; background-image: linear-gradient(to bottom, rgba(255,137,198,0), rgba(255,137,198,1));} @keyframes slide {from { background-position: 0 0; } to {background-position: -400px -400px;}} .kangwink {width:610px; height:750px; position:absolute; background:url(https://i.imgur.com/8N0lnzd.png); background-size: cover; opacity:0; transition: all .25s ease-in-out;} .kangwinkeffect {width:59px; height:24px; position:absolute; background:url(https://i.imgur.com/LNDQRk7.png); margin-left:442px; margin-top:230px; opacity:0; transition: all .25s ease-in-out;} @keyframes wink { 0% { opacity:0; } 50% { opacity:1;} 100% { opacity:0; margin-left:492px; }} .kangband {width:610px; height:125px; position:absolute; background-color:rgba(144,197,138,.75); margin-top:525px; transition: all .5s ease-in-out;} .kangtitle {width:556px; height:106px; position:absolute; margin-top:535px; margin-left:27px; background:url(https://i.imgur.com/NdCd7Z7.png); transition: all .5s ease-in-out;} .kangtextbox {width:240px; height:auto; position:absolute; margin-left:11px; margin-top:375px; background-color:rgba(241,97,168,.75); border: 1px solid #f531d5; outline: 1px solid #86e65e; opacity:0; transition: opacity .25s ease-in-out; overflow:auto; padding: 5px 5px 5px 5px; text-align:justify; font-family:corbel; font-size:14px; line-height:13px; color:white; text-shadow: 1px 1px 3px black; overflow-y:hidden;} @keyframes jelly {from, to { transform: scale(1, 1); } 25% { transform: scale(0.9, 1.05); } 50% { transform: scale(1.05, 0.9); } 75% { transform: scale(0.95, 1.05); }} .kangtextbox b {color:#90c58a; text-shadow: 1px 1px 3px black;} .kangtextbox h {font-size:10px; line-height:75%;} .kangsubtitle {width:212px; height:34px; position:absolute; background:url(https://i.imgur.com/vXbyGbu.png); margin-top:351px; margin-left:-212px; opacity:0; transition: all .25s ease-in-out;} .kangcontainer:hover .kangsfondoalt {opacity:1; filter: hue-rotate(65deg);} .kangcontainer:hover .kanggradient {filter: hue-rotate(-45deg);} .kangcontainer:hover .kangtextbox {animation: jelly .5s ease-in-out; opacity:1; animation-delay:.5s; transition-delay: .5s; transition-property: opacity;} .kangcontainer:hover .kangwink {opacity:1;} .kangcontainer:hover .kangwinkeffect {animation: wink 1s ease-in-out;} .kangcontainer:hover .kangband {margin-left:610px;} .kangcontainer:hover .kangtitle {margin-left:-1220px;} .kangcontainer:hover .kangsubtitle {transition: all .75s ease-in-out; transition-delay: .75s; opacity:1; margin-left:44px;}