/* file name =>user/change_password.php and user/add_user.php */ .field-icon { float: right; margin-left: -25px; margin-top: -25px; margin-right: 10px; position: relative; z-index: 3; } /* file name =>user/profile.php */ .fa-plus { float: right; margin-left: -25px; margin-top: -70px; margin-right: 10px; position: relative; z-index: 3; font-size: 30px; } /* profile pic */ body { font-family: sans-serif; } .profilepic { position: relative; border-radius: 100% !important; overflow: hidden; background-color: #fffff7; width: 125px !important; height: 125px !important; border: 3px solid seagreen !important; } .profilepic:hover .profilepic__content { opacity: 1; } .profilepic:hover .profilepic__image { opacity: .5; } .profilepic__image { object-fit: cover; opacity: 1; transition: opacity .2s ease-in-out; } .profilepic__content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: black; opacity: 0; transition: opacity .2s ease-in-out; } .profilepic__icon { color: white; padding-bottom: 8px; } .fas { font-size: 20px; } .profilepic__text { text-transform: uppercase; font-size: 12px; width: 50%; text-align: center; } /* file name =>user/user_list.php */ .btn.active { display: none; } .btn span:nth-of-type(1) { display: none; } .btn span:last-child { display: block; } .btn.active span:nth-of-type(1) { display: block; } .btn.active span:last-child { display: none; }