CODEWITHSUNDEEP
csshoverclip-path
Kai Hartmann
Kai Hartmann

Reputation: 3154

Apply CSS hover just on visible part of a clipped image

.circle {
  -webkit-clip-path: circle(120px at center);
          clip-path: circle(120px at center);
}

.circle:hover {
  cursor:move;
}
<img src="http://www.publicdomainpictures.net/pictures/10000/nahled/2185-1265776088aCTz.jpg" alt="" class=" circle">

Is there a way to have hover just apply on the visible part of the image?

Upvotes: 5

Views: 1214

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78550

Only what I can see to make it work is to add a wrapper element and apply the clip to that but the hover state to the inner element.

.wrapper {
  display:inline-block;
  -webkit-clip-path: circle(120px at center);
          clip-path: circle(120px at center);
}

.circle {
  display:block;
}

.circle:hover {
  cursor:move;
}
<div class="wrapper"><img src="//placehold.it/300" alt="" class=" circle"></div>

Upvotes: 5

Related Questions