CODEWITHSUNDEEP
htmlcssrollover-effect
Nesta
Nesta

Reputation: 1008

Hover effect on circle container

I have a circle with a hover effect on it and some text under. Now what I'm trying to achieve is to trigger that hover effect when you rollover the entire circle container and not only the circle itself.

DEMO http://jsfiddle.net/kL0vxrxL/

.icon-circle-box {
  text-align: center;
  margin: 0 auto 130px;
}
.icon-circle {
  display: inline-block;
  font-size: 42px;
  cursor: pointer;
  margin: 0 0 28px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #fff;
}
.icon-circle-box p {
  margin-top: 13px;
}
.icon-circle:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: '';
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.icon-circle:before {
  font-family: 'lineicons';
  speak: none;
  font-size: 42px;
  line-height: 100px;
  display: block;
}
.circle-effect .icon-circle {
  color: #000;
  box-shadow: 0 0 0 2px #000;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  transition: color 0.3s;
}
.circle-effect .icon-circle:after {
  top: -2px;
  left: -2px;
  padding: 2px;
  z-index: -1;
  background: #000;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -moz-transition: -moz-transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s;
}
.icon-circle:hover {
  color: #fff;
}
.icon-circle:hover:after {
  -webkit-transform: scale(0.85);
  -moz-transform: scale(0.85);
  -ms-transform: scale(0.85);
  transform: scale(0.85);
  opacity: 1;
  filter: alpha(opacity=100);
}
<div class="icon-circle-box circle-effect">
  <a href="#" class="icon-circle"></a>
  <p>Donec id elit non mi porta gravida at eget metus.</p>
</div>

Upvotes: 0

Views: 1531

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241278

I'm trying to achieve is to trigger that hover effect when you rollover the entire circle container and not only the circle itself.

Then you would add the :hover pseudo-class to the parent element, .icon-circle-box.

Updated Example

.icon-circle-box:hover .icon-circle:after {
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 1;
    filter: alpha(opacity=100);
}

Upvotes: 4

Related Questions