title: How to trigger child class, if I hover parent?
body: <p>I want to trigger child div, when hovering on parent. Searched numerous themes, but do not find actually helpful except: <code>class.parent:hover class.child {}</code> My theme is not duplicate for: <a href="https://stackoverflow.com/questions/37488517/css-hover-child-to-trigger-effect-on-parent">Css hover child to trigger effect on parent</a></p>
  
  <p>Sources provided: <a href="https://jsfiddle.net/Arty_Prof/81e4uy3w/" rel="nofollow noreferrer">https://jsfiddle.net/Arty_Prof/81e4uy3w/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    background: black;
  }
  
  #buttonStart {
    position: absolute;
    width: 15%;
    height: 10%;
    bottom: 15%;
    left: 5%;
  }
  
  #imageStart {
    width: 100%;
    height: 100%;
  }
  
  #buttonStart:hover .hovicon.effect-3.sub-b {
    cursor: pointer;
  }
  .hovicon {
      display: inline-block;
      font-size: 45px;
      line-height: 90px;
      cursor: pointer;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      text-align: center;
      position: relative;
      text-decoration: none;
      z-index: 1;
      color: #fff;
  }
  .hovicon.auto-width {
      width: auto;
      height: auto;
  }
  .hovicon: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;
  }
  .hovicon:before {
      speak: none;
      font-size: 48px;
      line-height: 90px;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      display: block;
      -webkit-font-smoothing: antialiased;
  }
  .hovicon.effect-3 {
   position: absolute;
   bottom:-13%;
   left: 62%;
   font-size: 3.8em;
   -webkit-transition: color 0.3s;
      -moz-transition: color 0.3s;
      transition: color 0.3s;
  }
  .hovicon.effect-3:after {
      top: -2px;
      left: -2px;
      padding: 2px;
      z-index: -1;
      background: #fff;
      -webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
      -moz-transition: -moz-transform 0.2s, opacity 0.3s;
      transition: transform 0.2s, opacity 0.3s;
  }
  /* Effect 3b */
  .hovicon.effect-3.sub-b, .hovicon.effect-3.sub-b i {
      color: #fff;
  }
  .hovicon.effect-3.sub-b:hover, .hovicon.effect-3.sub-b:hover i {
   color: #696969;
  }
  .hovicon.effect-3.sub-b:after {
      -webkit-transform: scale(1.3);
      -moz-transform: scale(1.3);
      -ms-transform: scale(1.3);
      transform: scale(1.3);
      opacity: 0;
  }
  .hovicon.effect-3.sub-b:hover:after {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="buttonStart"&gt;
    &lt;div&gt;&lt;input type="image" id="imageStart" src="https://cdn.pixabay.com/photo/2017/10/10/07/48/beach-2836300_960_720.jpg"&gt;
      &lt;div class="hovicon effect-3 sub-b" id="buttonStartEffect"&gt;&amp;nbsp &amp;nbsp&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Other code in fiddle.</p>
  
  <p>I expect to see white circle, while hovering a parent div (a picture in my case).</p>