WordPress Hosting
Free Photos
WordPress Themes

Accordian with Button to Image hover effect

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .your-income-payslip { width: 100%; background-color: #eeeeee; padding: 40px; } .your-income-payslip ul{ list-style-type: none;} .your-income-payslip ul li{ display: inline-block; padding: 5px 15px; transition:all ease 0.4s; cursor: pointer; } .your-income-payslip ul li:nth-child(1){ border-left: 5px solid #12ba8d; box-shadow: inset 0 0 0 0 #12ba8d;} .your-income-payslip ul li:nth-child(1):hover{ box-shadow: inset 200px 0 0 0 #12ba8d; color: #fff;} .your-income-payslip ul li:nth-child(2){ border-left: 5px solid #f5ac0f; box-shadow: inset 0 0 0 0 #f5ac0f;} .your-income-payslip ul li:nth-child(2):hover{ box-shadow: inset 200px 0 0 0 #f5ac0f; color: #fff;} .your-income-payslip ul li:nth-child(3){ border-left: 5px solid #f86679; box-shadow: inset 0 0 0 0 #f86679;} .your-income-payslip ul li:nth-child(3):hover{ box-shadow: inset 200px 0 0 0 #f86679; color: #fff;} .your-income-payslip ul li:nth-child(4){ border-left: 5px solid #00b0d9; box-shadow: inset 0 0 0 0 #00b0d9;} .your-income-payslip ul li:nth-child(4):hover{ box-shadow: inset 200px 0 0 0 #00b0d9; color: #fff;} .your-income-payslip ul li:nth-child(5){ border-left: 5px solid #d95700; box-shadow: inset 0 0 0 0 #d95700;} .your-income-payslip ul li:nth-child(5):hover{ box-shadow: inset 200px 0 0 0 #d95700; color: #fff;} .your-income-payslip-image {position: relative;} .your-income-payslip-image-main { position: relative; width: 100%;} .your-income-payslip-image-body img:nth-child(1) { position: absolute; top:57%; right:2.5%; display: none;} .your-income-payslip-image-body img:nth-child(2) { position: absolute; bottom:3.2%; right:2%; display: none; } .your-income-payslip-image-body img:nth-child(3) { position: absolute; top:61%; right:2.5%; display: none;} .your-income-payslip-image-body img:nth-child(4) { position: absolute; top:26%; right:2%; display: none;} .your-income-payslip-image-body img:nth-child(5) { position: absolute; bottom:5%; right:33%; display: none;} .your-income-payslip2 { width: 100%; background-color: #eeeeee; padding: 40px; } .your-income-payslip2 ul{ list-style-type: none;} .your-income-payslip2 ul li{ display: inline-block; padding: 5px 15px; transition:all ease 0.4s; cursor: pointer; } .your-income-payslip2 ul li:nth-child(1){ border-left: 5px solid #12ba8d; box-shadow: inset 0 0 0 0 #12ba8d;} .your-income-payslip2 ul li:nth-child(1):hover{ box-shadow: inset 260px 0 0 0 #12ba8d; color: #fff;} .your-income-payslip2 ul li:nth-child(2){ border-left: 5px solid #f86679; box-shadow: inset 0 0 0 0 #f86679;} .your-income-payslip2 ul li:nth-child(2):hover{ box-shadow: inset 200px 0 0 0 #f86679; color: #fff;} .your-income-payslip2-image {position: relative;} .your-income-payslip2-image-main { position: relative; width: 100%;} .your-income-payslip2-image-body img:nth-child(1) { position: absolute; top:5%; right:2%; display:none;} .your-income-payslip2-image-body img:nth-child(2) { position: absolute; bottom:6%; left:3%; display:none;} .budgeting2-acord { margin:0 auto; width:100%; } .budgeting2-acord .tab { position:relative; width:100%; overflow:hidden; } .budgeting2-acord input { position:absolute; opacity:0; z-index:-1; } .budgeting2-acord label { position:relative; display:block; background:#fff; font-weight:bold; line-height:2; cursor:pointer; padding:7px 15px; color:#171717; font-size:18px; transition:0.4s all; margin:7px 0px; border-bottom:1px solid #eee;} .budgeting2-acord label:hover {background:#fafafa; border-radius:10px; border-bottom:1px solid #fff; } .budgeting2-acord .tab-cont { max-height:0px; overflow:hidden; background:#f7f7f7; transition:all 1s; padding:0px 20px; border-radius:10px; } .budgeting2-acord .tab-cont .tab-cont1 {padding:20px 0px;} .budgeting2-acord input:checked ~ .tab-cont { max-height:10000px; transition:all 3s; } .budgeting2-acord label::after { position:absolute; right:15px; top:-22px; display:block; width:15px; height:15px; line-height:3; text-align:center; font-size:30px; color:#9a9a9a; } .budgeting2-acord input[type=checkbox] + label::after { content:"+"; } .budgeting2-acord input[type=checkbox]:checked + label::after { content:"-"; } .budgeting2-acord input:checked ~ label:hover {background:none;} .budgeting2-acord input:checked ~ label {border-bottom:1px solid #fff;} </style> </head> <body> <div class="budgeting2-acord"> <div class="tab"> <input id="tab-one" type="checkbox" name="tabs" checked> <label for="tab-one" class="signika-font">1. Continued business justification</label> <div class="tab-cont"> <div class="tab-cont1"> <div class="budgeting2_new"> <div class="your-income-payslip"> <ul> <li>Gross earnings </li> <li>Net earnings </li> <li>Income tax paid </li> <li>National Insurance paid </li> <li>How you were paid </li> </ul> <div class="your-income-payslip-image"> <div class="your-income-payslip-image-main"> <img src="content\lessons\53\images\payslip.jpg"> </div> <div class="your-income-payslip-image-body"> <img src="content\lessons\53\images\payslip1-1.png"> <img src="content\lessons\53\images\payslip1-3.png"> <img src="content\lessons\53\images\payslip1-2.png"> <img src="content\lessons\53\images\payslip1-4.png"> <img src="content\lessons\53\images\payslip1-5.png"> </div> </div> </div> </div> </div> </div> </div> <div class="tab"> <input id="tab-two" type="checkbox" name="tabs"> <label for="tab-two" class="signika-font">1. Continued business justification</label> <div class="tab-cont"> <div class="tab-cont1"> <div class="budgeting2_new"> <div class="your-income-payslip2"> <ul> <li>Your National Insurance number </li> <li>Your tax code </li> </ul> <div class="your-income-payslip2-image"> <div class="your-income-payslip2-image-main"> <img src="content\lessons\53\images\payslip.jpg"> </div> <div class="your-income-payslip2-image-body"> <img src="content\lessons\53\images\payslip1-6.png"> <img src="content\lessons\53\images\payslip1-7.png"> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.