How can I add an image over a tag like p, h1?

user_16047143 0
Viewed 74

I want to put in each tag p, h, button to put an svg as follows:

enter image description here

I tried to add "position: relative / absolute", I also tried z-index, but I probably missed something and I would like some advice on how I could do it in the picture. Source code below. 

@media(min-width:769px) {
      .signly-text-segment {
          position: relative;
      }
  }
  .svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}
.signly-text-segment div.signly-play .signly-play-icon {
      transition: opacity .25s ease-in-out;
      display: none;
      filter: drop-shadow(0 0 3px black)
  }
  .signly-text-segment.play:hover {
          transition: opacity .25s ease-in-out;
          background: rgba(255, 204, 1, .5);
          transition: opacity .25s
      }
      .signly-text-segment.play:hover div.signly-play {
          z-index: 10;
          background-color: transparent
      }
      .signly-text-segment.play:hover div.signly-play * {
          color: #ffcc01
      }
      .signly-text-segment.play:hover div.signly-play svg>* {
          fill: #ffcc01
      }
      .signly-text-segment.play:hover div.signly-play .signly-play-icon {
          display: block;
          border-radius: 50%;
          background-color: transparent
      }
      .signly-text-segment.play:hover div.signly-play .signly-play-icon.active {
          cursor: pointer;
          opacity: .25
      }
      .signly-text-segment.play:hover div.signly-play .signly-play-icon.active:hover {
          background-color: transparent;
          opacity: 1
      }
      .signly-text-segment.play:hover div.signly-play .signly-play-icon.inactive {
          display: none
      }
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="signly-text-segment play" data-signly="{&quot;index&quot;:9}"
              style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
              data-uw-styling-context="true">‌Swipe or click text to view sign language.
            <div class="signly-play"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play" role="img"
                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
                class="signly-play-icon svg-inline--fa fa-play fa-w-14 fa-2x active">
                <path fill="currentColor"
                  d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
                  class=""></path>
              </svg></div>
            </p>

svg css html
1 Answers

Try the below fiddle, I added the svg image through CSS.

https://jsfiddle.net/mtsaikumar1/2pL1et7x/6/

<p class="signly-text-segment play" data-signly="{&quot;index&quot;:9}" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" data-uw-styling-context="true"> Swipe or click text to view sign language.</p>

.signly-text-segment {
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='play' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' class='signly-play-icon svg-inline--fa fa-play fa-w-14 fa-2x active'%3E%3Cpath fill='currentColor' d='M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z' class=''%3E%3C/path%3E%3C/svg%3E");
  background-position: center left 5px;
  background-repeat: no-repeat;
  padding-left: 25px;
  background-size: 13px;
}

I have converted the svg code to the data-uri by using this link https://yoksel.github.io/url-encoder/

Update: I added the swipe effet for the icon in the below fiddle. Please check this as well.

https://jsfiddle.net/mtsaikumar1/2pL1et7x/19/

user_29717050
Related