title: Rotating a shape in the div while making another div stay in the same place
body: <p>I have a diamond shape in one div with an image in it and there is a div with absolute positioned text. On hover, I want the diamond to spin, but not the text. Is it possible to achieve? I suppose I will have to change the HTML a bit.
  Here are my attempts so far:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="rel"&gt;
    &lt;div class="dn-diamond"&gt;
      &lt;h4&gt; Random text &lt;/h4&gt;
        &lt;div class="dn-diamond-img"&gt;
          &lt;img src="../images/someImage.png" alt=""&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.rel {
      position: relative;
      display: inline;
  }
  
  .rel:hover {
      animation: spin 3s infinite linear;
  }
  
  @keyframes spin {
      from { transform: rotateY(0deg); }
      to { transform: rotateY(360deg); }
  }
  
  
  .rel:hover .dn-diamond h4 {
      -webkit-animation-name: none !important;
    animation-name: none !important;
  }
  
  .dn-diamond h4 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    position: absolute;
    top: -20px;
    left: 20px;
    padding: 10px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
  }
  
  .dn-diamond-img {
      width: 420px;
    height: 420px;
  
  }
  
  .dn-diamond-img img {
      width: 100%;
      height: auto;
      -webkit-transform: rotate(45deg) translateX(-95px);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg) translateX(-100px) translateY(45px);
    transform-origin: 50% 50%;
    overflow: hidden;
  }
  </code></pre>
  
  <p>Thanks for any help!      </p>