What is the best way to attach the toggle bar to the right side of the rounded image?

Question

my codepen project from freecodecamp

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

Run code

The problem occurs on the "about" page. What I want to do is take the switch panel, which says “click to move the panel to the right” and attach it to the right side of the image. However, the image is rounded, so I'm not sure if this is the best way to do this.

Please keep in mind that I am still new to this business.

Also in this note is the jquery event so that the contents of the contents of the toggle panel are hidden when the web page loads, am I correct?

thank

Answer 1

? http://codepen.io/wilman/pen/BjgRNo

CSS Shapes, 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>