Icon Box Designs

<== HTML ==>
<div class="dd-box shadow">
   <div class="dd-bg"></div>
   <div class="dd-icon">
      <i class="fa fa-id-card"></i>
   </div>
   <div class="dd-data">
      <h4 class="head"></h4>
      <p class="m-0">
          We Provide Auto Attendances and it's Entry-Exit
          Time  Alert To Parents Via SMS Or Notification
      </p>
   </div>
</div>
	

	
<== CSS ==>
<style>

.dd-box {
   position: relative;
   max-width: 290px;
   padding: 30px 15px;
   padding-top: 0;
   margin: auto;
}

.dd-bg {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 60px;
   background-color: #fd3f30;
}

.dd-icon {
   position: relative;
   top: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 80px;
   height: 80px;
   color: #fd3f30;
   font-size: 32px;
   text-shadow: 0 0 1px #000;
   margin: auto;
   z-index: 10;
}

.dd-icon::before {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: #fff;
   border: 4px solid #fd3f30;
   transition: .3s;
   transform: rotate(45deg);
   z-index: -1;
   box-shadow: 0 0 20px rgb(0 0 0 / 20%);
}

.dd-data{
   margin-top: 50px;
}

.dd-data .head {
   color: #212529;
   text-align: center;
}

.dd-data p {
   height: 140px;
   overflow-y: auto;
   padding: 0 6px;
}

</style>

<== HTML ==>
<div class="dd-box shadow-lg">
   <div class="dd-head position-relative py-3">
      <span class="dd-icon-span"></span>
      <div class="dd-icon"><i class="fa fa-home"></i></div>
   </div>
   <h3 class="dd-heading">Title Title</h3>
   <p class="dd-data">
      Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Sint ipsum, ad molestias et ab similique 
      aspernatur, consectetur quisquam fugit distinctio 
      deddunt, eaque ut laborum accusamus cum accusantium 
      reiciendis ipsam fugiat. Lorem ipsum dolor sit amet 
      consectetur adipisicing elit.Lorem ipsum dolor 
      sit amet consectetur adipisicing elit.
   </p>
</div>
	

	
<== CSS ==>
<style>

.dd-box {
    max-width: 295px;
    border-radius: 8px;
    overflow: hidden;
    margin: auto;
}

.dd-icon {
    display: flex;
    width: 80px;
    height: 80px;
    position: relative;
    color: #f9f9f9;
    font-size: 32px;
    text-shadow: 2px 2px 0.5rem #000000;
    justify-content: center;
    align-items: center;
    margin: auto;
    transition: .5s;
}

.dd-icon-span {
    position: absolute;
    width: 80px;
    height: 80px;
    left: calc(50% - 40px);
    background-color: #212529;
    transform: rotate(0);
    transition: .5s;
}

.dd-box:hover .dd-icon {
    font-size: 52px;
}

.dd-box:hover .dd-icon-span {
    transform: rotate(180deg);
    border-radius: 50%;
    top: -100px;
    left: -95px;
    bottom: -370px;
    right: -90px;
    width: auto;
    height: auto;
}

.dd-heading {
    position: relative;
    z-index: 5;
    color: #fd3f30;
    text-align: center;
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 16px 0;
    margin: 0;
}

.dd-data {
    position: relative;
    z-index: 5;
    height: 130px;
	font-size: 14px;
    overflow-y: auto;
    padding: 0 7px 0 15px;
    margin: 0 8px 15px 0;
}

.dd-box:hover .dd-data {
    color: white !important;
}

.dd-data::-webkit-scrollbar {
    width: 2px;
}

.dd-data::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
}

.dd-data:hover::-webkit-scrollbar-thumb {
    background: #fd3f30;
    border-radius: 10px;
}

</style>

<== HTML ==>
<div class="dd-box shadow p-3">
   <span class="dd-box-bg"><i class="fa fa-flask"></i></span>
   <span class="dd-icon"><i class="fa fa-flask"></i></span>
   <h4 class="dd-head pt-4 mb-2 m-0">Consectetur</h4>
   <p class="dd-p text-justify">
      Lorem ipsum dolor sit amet consectetur 
      adipisicing elit. Amet laboriosam incidunt 
      hic laborum minus deleniti. Provident 
      blanditiis ea rem exercitationem ipsa 
      asperiores, molestias laborum ab id quo 
      autem laboriosam sit!
      Lorem ipsum dolor sit amet consectetur 
      adipisicing elit. Amet laboriosam incidunt 
      hic laborum minus deleniti. Provident 
      blanditiis ea rem exercitationem ipsa 
      asperiores, molestias laborum ab id quo 
      autem laboriosam sit!
   </h4>
</div>
	

	
<== CSS ==>
<style>

.dd-icon{
    display: flex;
    position: relative;
    width: 80px;
    height: 80px;
    color: white;
    font-size: 32px;
    background-color: #fd3f30;
    justify-content: center;
    align-items: center;
    margin: 16px auto;
    transition: .3s;
}

.dd-box{
    position: relative;
    overflow: hidden;
    max-width: 295px;
    height: 340px;
    border-radius: 8px;
    margin: auto;
}
.dd-box-bg{
    display: flex;
    position: absolute;
    top: 32px;
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    background-color: #212529;
    color: white;
    font-size: 32px;
    justify-content: center;
    align-items: center;
    transform: rotate(45deg);
    transition: .5s;
    z-index: -1;
}

.dd-box:hover .dd-box-bg{
    top: 16px;
    left: 16px;
    transform: rotate(0);
}

.dd-box:hover .dd-icon{
    height: 0;
    color: transparent;
}

.dd-head{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Raleway', sans-serif;
    color: #212529;
    font-weight: 600;
    text-align: center;
    transition: .5s;
}

.dd-box:hover .dd-head{
    padding-top: 65px !important;
}

.dd-p{
    height: 120px;
    overflow-y: auto;
    font-size: 14px;
    transition: .5s;
    padding: 0 10px;
}

.dd-box:hover .dd-p{
    height: 165px;
}

.dd-p::-webkit-scrollbar {
    width: 2px;
}

.dd-p:hover::-webkit-scrollbar-thumb {
    background: #fd3f30; 
    border-radius: 10px;
}

</style>