what is the best way to attach a toggle panel to right side of rounded picture?

HTML Code:

<div class="container container-fluid">
            <div class="picture">
              <img class="img-circle img-responsive" src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NTU2MzE2NjUyOTk2MTA3.jpg" class="art">
            </div><!--end of picture-->

          <div id="flip">
            <h3>Click to slide the panel right</h3>
          </div>

            <div class="title">
              <p class="lead">I'm a <a class="link" target='_blank' href='http://www.freecodecamp.com/map'>self taught</a> web designer, developer, co-founder and entrepreneur based in Finland.
                <br> I'm currently part of a small web development
                <br> team in an upcoming start-up, building web and
                <br> mobile applications.
                <br>My passion is to use technology based
                <br> solutions, to help solve real world challenges.
                <br> Competences:
                <br> Languages and Frameworks:
                <br> Javascript, HTML5, CSS3, jQuery, Bootstrap3,
                <br> Angular.js, Meteor.js.
                <br> Tools & expertise:
                <br> Git, Responsive Web Design, Agile
                <br> Methodologies.</p>
            </div>

  </div><!--end of container-->

CSS code:

#flip>h3{
  border: 2px solid black;
 display:inline;
  
}
#flip{
position:absolute;
  transform:rotate(-90deg);
}

.title>p{
 border:2px solid green;
  background-color:#e5eecc;
}

The problem arises on the "about" page. What I want to do is take the toggle panel that says "click to slide the panel right" and attach it to the right side of the picture. The picture is rounded however, so I am not sure what is the best way to do this.

Please bear in mind that i am still a novice in regards to doing these things.

Also on that note, the jquery event to keep the content of the toggle panel hidden on load of the webpage, is what i did correct?

Thank you

Solution

What do you think about this technique? http://codepen.io/wilman/pen/BjgRNo

It's based on CSS Shapes and it just requires adding a single new element inside the h3 (shapy)

#flip > h3 {
  border: 2px solid black;
  border-left-color: transparent; /* hides the left border */
  height: 270px;
  width: 210px;
  padding-right: 7px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 0 50% 50% 0; /* Apply radius only on top-right and bottom-right corners */
  line-height: 1.4; /* this spaces the words a bit */
  margin-left: 140px;
  background: rgba(128, 128, 128, 0.39);
}

#flip {
  position: absolute;
  margin-top: -290px;
  overflow: hidden;
  z-index: 0;  /* modify this value if you don't want this behind the image */
}

.shapy {
  float: left; /* float is required for shapes to work correctly */
  width: 280px;
  height: 270px;
  margin-left: -140px;
  margin-top: -30px;
  shape-outside: circle(68% at 7px 104px); /* this gives a round shape to the text */
}

/* Also some changes in the .picture element are neccesary */
.picture{        
  padding-top:150px;
  /* Made the picture container more compact to not interfere with the jquery click action */
  width: 270px;
  position: relative;
  z-index: 1;
}

<div id="flip">
  <h3>
    <!-- Apply a shape-outside property to this element -->
    <div class="shapy"></div>
    
    Click to slide the panel right
  </h3>
</div>