Как верстать блок

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  background: #272727; 
} 
 
#wrapper { 
  width: 100px; 
  height: 100px; 
  background: transparent; 
  position: relative; 
  margin: 30px 0 0 30px; 
} 
 
#logo { 
  width: 100px; 
  height: 100px; 
  background: url(http://icons.veryicon.com/png/Media/Free%20Flat%20Multimedia/Dslr%20Camera.png); 
  background-size: cover; 
  position: absolute; 
} 
 
#block { 
  width: 100px; 
  height: 100px; 
  background: transparent; 
  position: absolute; 
  border: 3px solid red; 
    transition:all .3s; 
} 
 
#wrapper:hover #block { 
  width: 100px; 
  transition:all .3s; 
  transform: rotate(45deg); 
  height: 100px; 
  background: transparent; 
  position: absolute; 
  border: 3px solid red; 
}

<div id="wrapper"> 
  <div id="logo"></div> 
  <div id="block"></div> 
</div>

* { 
  margin: 0; 
  padding: 0; 
  -webkit-box-sizing: border-box; 
          box-sizing: border-box; 
} 
body { 
min-height: 100vh; 
display: -webkit-box; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-pack: center; 
    -ms-flex-pack: center; 
        justify-content: center; 
-webkit-box-align: center; 
    -ms-flex-align: center; 
        align-items: center; 
} 
div { 
  display: block; 
  margin: 0 auto; 
  position: relative; 
  text-align: center; 
  width: 100px; 
  height: 100px; 
  line-height: 100px; 
  color: pink; 
  font-size: 2em; 
} 
 
div:before { 
  content: ''; 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  border: 2px solid lightgrey; 
  -webkit-transition: all .4s cubic-bezier(0.24, 1.8, 0.68, 0.98); 
  -o-transition: all .4s cubic-bezier(0.24, 1.8, 0.68, 0.98); 
  transition: all .4s cubic-bezier(0.24, 1.8, 0.68, 0.98); 
  -webkit-transform: rotate(0deg); 
      -ms-transform: rotate(0deg); 
          transform: rotate(0deg); 
} 
 
div:hover:before { 
  border: 2px solid pink; 
  -webkit-transform: rotate(-45deg); 
      -ms-transform: rotate(-45deg); 
          transform: rotate(-45deg); 
}

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
<div><i class="fa fa-heart-o" aria-hidden="true"></i></div>