<svg>
<clipPath id="tooltip" clipPathUnits="objectBoundingBox">
<path d="M1,0H0v0.9302195h0.4483962C0.477628,0.9342086,0.5003342,0.9639273,0.5003369,1h0.0000107 c0-0.0360727,0.022709-0.0657914,0.0519407-0.0697805H1V0z"/>
</clipPath>
</svg>
<div class="tooltip">
<img src="https://images.unsplash.com/photo-1621508654686-809f23efdabc?cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTcwMjcyOQ&ixlib=rb-1.2.1&q=85&w=800&h=200&fit=crop" />
</div>
<div class="tooltip">
<img src="https://images.unsplash.com/photo-1622396481359-6f5c5f481566?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMjY2OTc5OA&ixlib=rb-1.2.1&q=80&w=500&h=1000&fit=crop" />
</div>
.tooltip {
clip-path: url(#tooltip);
font-size: 0;
width: 100%;
max-width: 350px;
+ .tooltip {
margin-top: 20px;
}
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
body {
background: #E5E5E5;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
justify-content: center;
min-height: 90vh;
padding: 20px 10px;
}
img {
width: 100%;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.