CODEWITHSUNDEEP
htmlcsscss-animations
Jamie
Jamie

Reputation: 373

Icons are not showing up

On "Codepen.io" I've found a nice CSS for a circle menu which I would like to use. (https://codepen.io/oliver_merz/pen/zqXZQG). But as you can see the labels (buttons) are empty. There should be images in it. I've tested this with a random image (https://image.flaticon.com/icons/svg/771/771605.svg). Unfortunately, nothing shows up..

It's about the following CSS code:

.cssplay-menu .segment label {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  background: #008080;
  border: 1px solid #fff;
  cursor: pointer;
  transform-origin: left top;
  transition: 0.25s cubic-bezier(0, 0, 1, 1);
  transition: 0.25s ease;
}

Upvotes: 0

Views: 72

Answers (1)

Temani Afif
Temani Afif

Reputation: 272648

You need to adjust some CSS to make them visible because actually they are hidden:

.cssplay-menu .segment label span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 50%; /*changed*/
  bottom: 10%; /*changed*/
  margin: auto;
  width: 35px;
  height: 35px;
  background-position: center center;
  background-repeat: no-repeat;
}

Full code

.cssplay-menu {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 20px auto 0;
  width: 100%;
  max-width: 568px;
  height: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.cssplay-menu > div {
  position: relative;
  margin-bottom: 250px;
	padding-bottom: 100%;
	max-width: 100%;
	height: 0;
}

.cssplay-menu * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.cssplay-menu .holder {
  position: relative;
	padding-bottom: 100%;
	max-width: 100%;
	height: 0;
  overflow: hidden;
}

.cssplay-menu input {
  position: absolute;
  display: none;
}

.cssplay-menu .segment {
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  margin-left: -48%;
  margin-top: -48%;
  width: 96%;
  height: 96%;
  border-radius: 50%;
  overflow: hidden;
  transform: scale(0);
  transition: 0.5s cubic-bezier(.58, 2.4, 0.5, 0.5);
  transition: 0.5s ease;
}

.cssplay-menu .curve-upper {
  position: absolute;
  left: 1%;
  top: 1%;
  width: 98%;
  height: 98%;
  background: #fff;
  border-radius: 50%;
  transform: scale(0);
  transition: 0s;
}

.cssplay-menu .curve-lower {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(-140deg) scale(0);
  transition: 0s;
}

.cssplay-menu .curve {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  background: #8b0000;
  transform-origin: left top;
  transform: rotate(0deg) skewY(50deg);
}

.cssplay-menu .segment label {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  background: #008080;
  border: 1px solid #fff;
  cursor: pointer;
  transform-origin: left top;
  transition: 0.25s cubic-bezier(0, 0, 1, 1);
  transition: 0.25s ease;
}

.cssplay-menu .segment label span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 50%;
  bottom: 10%;
  margin: auto;
  width: 35px;
  height: 35px;
  background:url(https://image.flaticon.com/icons/svg/771/771605.svg);
  background-position: center center;
  background-repeat: no-repeat;
}

.cssplay-menu .segment label:nth-of-type(1) {
  transform: rotate(-140deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(2) {
  transform: rotate(-100deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(3) {
  transform: rotate(-60deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(4) {
  transform: rotate(-20deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(5) {
  transform: rotate(20deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(6) {
  transform: rotate(60deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(7) {
  transform: rotate(100deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(8) {
  transform: rotate(140deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(9) {
  transform: rotate(180deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(1) span {
  transform: skewY(-50deg) rotate(0deg);
}

.cssplay-menu .segment label:nth-of-type(2) span {
  transform: skewY(-50deg) rotate(-40deg);
}

.cssplay-menu .segment label:nth-of-type(3) span {
  transform: skewY(-50deg) rotate(-80deg);
}

.cssplay-menu .segment label:nth-of-type(4) span {
  transform: skewY(-50deg) rotate(-120deg);
}

.cssplay-menu .segment label:nth-of-type(5) span {
  transform: skewY(-50deg) rotate(-160deg);
}

.cssplay-menu .segment label:nth-of-type(6) span {
  transform: skewY(-50deg) rotate(-200deg);
}

.cssplay-menu .segment label:nth-of-type(7) span {
  transform: skewY(-50deg) rotate(-240deg);
}

.cssplay-menu .segment label:nth-of-type(8) span {
  transform: skewY(-50deg) rotate(-280deg);
}

.cssplay-menu .segment label:nth-of-type(9) span {
  transform: skewY(-50deg) rotate(-320deg);
}

.cssplay-menu .center {
  display: block;
  position: absolute;
  z-index: 200;
  left: 50%;
  top: 50%;
  margin-left: -20%;
  margin-top: -20%;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: #8b0000 url(cubic/settings.png) no-repeat center center;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0 2px #fff;
}

.cssplay-menu #toggle:checked + .holder .segment {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 0.5s ease;
  transform: scale(1);
}

.cssplay-menu #toggle:checked + .holder .center {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 0.5s ease;
  transform: scale(1.2);
}

.cssplay-menu #toggle:checked + .holder .curve-upper {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 1s ease;
  transform: scale(1);
}

.cssplay-menu #toggle:checked + .holder .curve-lower {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 1s ease;
  transform: rotate(-140deg) scale(1);
}

.cssplay-menu #c1:checked ~ .holder .segment label:nth-of-type(1),
.cssplay-menu #c2:checked ~ .holder .segment label:nth-of-type(2),
.cssplay-menu #c3:checked ~ .holder .segment label:nth-of-type(3),
.cssplay-menu #c4:checked ~ .holder .segment label:nth-of-type(4),
.cssplay-menu #c5:checked ~ .holder .segment label:nth-of-type(5),
.cssplay-menu #c6:checked ~ .holder .segment label:nth-of-type(6),
.cssplay-menu #c7:checked ~ .holder .segment label:nth-of-type(7),
.cssplay-menu #c8:checked ~ .holder .segment label:nth-of-type(8),
.cssplay-menu #c9:checked ~ .holder .segment label:nth-of-type(9) {
  background: #eb8c00;
}

.cssplay-menu #c1:checked ~ #toggle:checked ~ .holder .curve-lower {
  transform: rotate(-140deg)
}

.cssplay-menu #c2:checked ~ #toggle:checked ~ .holder .curve-lower {
  transform: rotate(-100deg)
}

.cssplay-menu #c3:checked ~ #toggle:checked ~ .holder .curve-lower {
  transform: rotate(-60deg)
}

.cssplay-menu #c4:checked ~ #toggle:checked ~ .holder .curve-lower {
  transform: rotate(-20deg)
}

.cssplay-menu #c5:checked ~ #toggle:checked ~ .holder .curve-lower {
  transform: rotate(20deg)
}

.cssplay-menu #c6:checked ~ #toggle:checked ~ .holder .curve-lower {
  transform: rotate(60deg)
}

.cssplay-menu #c7:checked ~ #toggle:checked ~ .holder .curve-lower {
  transform: rotate(100deg)
}

.cssplay-menu #c8:checked ~ #toggle:checked ~ .holder .curve-lower {
  transform: rotate(140deg)
}

.cssplay-menu #c9:checked ~ #toggle:checked ~ .holder .curve-lower {
  transform: rotate(180deg)
}

.cssplay-menu .sub {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -50%;
  width: 100%;
  height: 0;
  overflow: hidden;
}

.cssplay-menu .sub dl {
  position: absolute;
  top: -190px;
  left: 50%;
  margin-left: -25%;
  padding: 0;
  width: 50%;
  opacity: 0;
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: all 0.5s ease;
}

.cssplay-menu .sub dl dt {
  text-align: center;
  font: bold 16px/20px 'Lato', arial, sans-serif;
  color: #8b0000;
}

.cssplay-menu .sub dl dd {
  margin: 0;
  padding: 0;
  text-align: center;
  font: normal 15px/20px 'Lato', arial, sans-serif;
  color: #000;
}

.cssplay-menu .sub dl dd a {
  color: #004040;
}

.cssplay-menu #c1:checked ~ #toggle:checked ~ .sub dl:nth-of-type(1),
.cssplay-menu #c2:checked ~ #toggle:checked ~ .sub dl:nth-of-type(2),
.cssplay-menu #c3:checked ~ #toggle:checked ~ .sub dl:nth-of-type(3),
.cssplay-menu #c4:checked ~ #toggle:checked ~ .sub dl:nth-of-type(4),
.cssplay-menu #c5:checked ~ #toggle:checked ~ .sub dl:nth-of-type(5),
.cssplay-menu #c6:checked ~ #toggle:checked ~ .sub dl:nth-of-type(6),
.cssplay-menu #c7:checked ~ #toggle:checked ~ .sub dl:nth-of-type(7),
.cssplay-menu #c8:checked ~ #toggle:checked ~ .sub dl:nth-of-type(8),
.cssplay-menu #c9:checked ~ #toggle:checked ~ .sub dl:nth-of-type(9) {
  top: 20px;
  opacity: 1;
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5) 0.5s;
  transition: opacity 0.5s ease, top 0.5s ease 0.5s;
}

.cssplay-menu #c1:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c2:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c3:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c4:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c5:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c6:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c7:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c8:checked ~ #toggle:checked ~ .sub,
.cssplay-menu #c9:checked ~ #toggle:checked ~ .sub {
  height: 250px
}
<div class="cssplay-menu">
  <div>
    <input type="radio" id="c1" name="segment" checked="checked">
    <input type="radio" id="c2" name="segment">
    <input type="radio" id="c3" name="segment">
    <input type="radio" id="c4" name="segment">
    <input type="radio" id="c5" name="segment">
    <input type="radio" id="c6" name="segment">
    <input type="radio" id="c7" name="segment">
    <input type="radio" id="c8" name="segment">
    <input type="radio" id="c9" name="segment">
    <input type="checkbox" id="toggle" checked="checked">
    <div class="holder">
      <div class="segment">
        <label for="c1"><span></span></label>
        <label for="c2"><span></span></label>
        <label for="c3"><span></span></label>
        <label for="c4"><span></span></label>
        <label for="c5"><span></span></label>
        <label for="c6"><span></span></label>
        <label for="c7"><span></span></label>
        <label for="c8"><span></span></label>
        <label for="c9"><span></span></label>
      </div>
      <div class="curve-lower">
        <div class="curve"></div>
      </div>
      <div class="curve-upper"></div>
      <label for="toggle" class="center"></label>
    </div>
    <div class="sub">
      <dl>
        <dt>SUB MENU #1</dt>
        <dd><a href="#url">Item #1.1</a></dd>
        <dd><a href="#url">Item #1.2</a></dd>
        <dd><a href="#url">Item #1.3</a></dd>
        <dd><a href="#url">Item #1.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #2</dt>
        <dd><a href="#url">Item #2.1</a></dd>
        <dd><a href="#url">Item #2.2</a></dd>
        <dd><a href="#url">Item #2.3</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #3</dt>
        <dd><a href="#url">Item #3.1</a></dd>
        <dd><a href="#url">Item #3.2</a></dd>
        <dd><a href="#url">Item #3.3</a></dd>
        <dd><a href="#url">Item #3.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #4</dt>
        <dd><a href="#url">Item #4.1</a></dd>
        <dd><a href="#url">Item #4.2</a></dd>
        <dd><a href="#url">Item #4.3</a></dd>
        <dd><a href="#url">Item #4.4</a></dd>
        <dd><a href="#url">Item #4.5</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #5</dt>
        <dd><a href="#url">Item #5.1</a></dd>
        <dd><a href="#url">Item #5.2</a></dd>
        <dd><a href="#url">Item #5.3</a></dd>
        <dd><a href="#url">Item #5.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #6</dt>
        <dd><a href="#url">Item #6.1</a></dd>
        <dd><a href="#url">Item #6.2</a></dd>
        <dd><a href="#url">Item #6.3</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #7</dt>
        <dd><a href="#url">Item #7.1</a></dd>
        <dd><a href="#url">Item #7.2</a></dd>
        <dd><a href="#url">Item #7.3</a></dd>
        <dd><a href="#url">Item #7.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #8</dt>
        <dd><a href="#url">Item #8.1</a></dd>
        <dd><a href="#url">Item #8.2</a></dd>
        <dd><a href="#url">Item #8.3</a></dd>
        <dd><a href="#url">Item #8.4</a></dd>
      </dl>
      <dl>
        <dt>SUB MENU #9</dt>
        <dd><a href="#url">Item #9.1</a></dd>
        <dd><a href="#url">Item #9.2</a></dd>
        <dd><a href="#url">Item #9.3</a></dd>
        <dd><a href="#url">Item #9.4</a></dd>
      </dl>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions