Hi guys i am trying to get an effect such as this websites : Example so that when the user hovers over the circles in "HOW WE WORK" section , it gets smaller
However on my code for some reason i cant seem to get it to work at all and i have no idea why, im using bootstrap 3 :
HTML:
<div class="row icon-set">
<div class="col-md-3 text-center">
<p class="icon-container">
<i class="fa fa-print"></i>
</p>
<p class="title"><span class="underline-text">Awesome</span>
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
CSS:
.icon-set .fa-print {
font-size: 40px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.icon-container {
position: relative;
height: 151px;
width: 151px;
border:2px solid #ccb08a;
border-radius: 50%;
margin: auto;
color: #ccb08a;
}
.icon-container:hover {
transform: scale(1);
border: 1px solid;
}
So im getting the border to change size but i cant get it go smaller at all like the example above,
Thanks for the help again
You can use transform: scale
to make the circle smaller when hover. See this jsfiddle
.icon-container {
position: relative;
height: 151px;
width: 151px;
border:2px solid #ccb08a;
border-radius: 50%;
margin: auto;
color: #ccb08a;
transform: scale(1);
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.icon-container:hover {
transform: scale(0.95);
border: 1px solid;
}
You can transform the size with transform:scale
or directly setting the height
& width
size
transform: scale
.icon-set .fa-print { font-size: 40px; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .icon-container { position: relative; height: 151px; width: 151px; border: 2px solid #ccb08a; border-radius: 50%; margin: auto; color: #ccb08a; } .icon-container:hover { transform: scale(1); border: 1px solid; }
<div class="row icon-set"> <div class="col-md-3 text-center"> <p class="icon-container"> <i class="fa fa-print"></i> </p> <p class="title"><span class="underline-text">Awesome</span> </p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> </div>
Height & Width method
.icon-set .fa-print { font-size: 40px; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .icon-container { position: relative; height: 151px; width: 151px; border: 2px solid #ccb08a; border-radius: 50%; margin: auto; color: #ccb08a; } .icon-container:hover { border: 1px solid; height: 120px; width: 120px; }
<div class="row icon-set"> <div class="col-md-3 text-center"> <p class="icon-container"> <i class="fa fa-print"></i> </p> <p class="title"><span class="underline-text">Awesome</span> </p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.