I have been experimenting with applying a "clip path" to an image using a rounded path. While I am aware that SVG clip paths are an option, I found them to be less responsive. As an alternative, I attempted to place the SVG graphic under the image within a div element. However, I encountered difficulties with mobile views as only the left side of the SVG was visible.
https://i.sstatic.net/58Izj.png
Could you assist me in discovering a more effective solution for this issue? I am open to any suggestions, even if they involve a completely different (and potentially superior) approach. I have created a fiddle for experimentation and problem understanding. When you resize the preview window to a mobile view, the issue becomes apparent:
https://jsfiddle.net/Lrtgr858/16/
html,
body {
background-color: #F7F7F7;
padding: 0;
overflow-x: hidden;
}
.svg-image-clip {
overflow: hidden;
top: -90px;
position: relative;
display: block;
width: 120%;
height: auto;
content: '';
background-image: url(https://svgshare.com/i/5r3.svg);
background-size: cover;
height: 200px;
left: 60%;
transform: translateX(-60%);
-webkit-transform: translateX(-60%);
-moz-transform: translateX(-60%);
}
.fullsize-image-div {
width: 100%;
height: 300px;
background-image: url(http://fs1.directupload.net/images/180315/vlz5bgwm.jpg);
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.fullsize-image-div h1 {
color: white;
font-size: 3rem;
}<div class="fullsize-image-div">
<h1 style="text-align:center">Hello, this is a test.</h1>
</div>
<div class="svg-image-clip"></div>