[SOLVED] Hover effect on circle container

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>

Solution

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);
}