Rotate Parent but not child on hover

Question

The <figure> element should rotate on hover but not its child, the <img>. Using SCSS only. <figure> has a background slightly bigger than <img> so it gives a border effect.

.about__image {
  margin: 4rem;
  width: 27rem;
  height: 27rem;
  float: left;
  -webkit-shape-outside: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  position: relative;
  background-image: radial-gradient(at left top, red 25%, blue 55%);
}

.about__photo {
  position: absolute;
  margin: 1rem;
  width: 25rem;
  height: 25rem;
  float: left;
  -webkit-shape-outside: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}

div {
  height: 600px;
  width: 100vw;
  background: #eee;
}

div:hover .about__image{
  transform: rotate(90deg);
}

<div>
<figure class="about__image">
  <img src="https://lorempixel.com/200/200/" class="about__photo">
</figure>
</div>

The <figure> element should rotate on hover but not its child, the <img>. Using SCSS only. <figure> has a background slightly bigger than <img> so it gives a border effect. The <figure> element should rotate on hover but not its child, the <img>. Using SCSS only. <figure> has a background slightly bigger than <img> so it gives a border effect.

inverse the rotation on child ... and can you share more code and explain what you want to achieve, as i don't see the reason to rotate the figure only — Temani Afif, Feb 06 '18 at 20:41
does figure have some background or something that would make this behavior relevant? — happymacarts, Feb 06 '18 at 20:54
it does have a background. &__image{ margin: 4rem; width: 27rem; height: 27rem; float: left; -webkit-shape-outside: circle(50% at 50% 50%); shape-outside: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); position: relative; background-image: radial-gradient(at left top, $color-primary-light 25%, $color-primary-dark 55%); — stemon, Feb 06 '18 at 21:06
so share your full code with CSS then inside the question to make it relevant — Temani Afif, Feb 06 '18 at 21:09
Thanks for the typo. I was actually trying to find what else you did that I cannot see. Your idea is great, I was actually working on that but couldn't make it work. Probably cause of typo as well. Thanks tho, you killed it in a snap!! ;) — stemon, Feb 06 '18 at 21:51
@stemon i simply added a transition :) check at the end of the classes .. by the way no need to edit your question as you should always show your issue to make the quesiton relevant ;) — Temani Afif, Feb 06 '18 at 21:52

score 2 · Answer 1 · edited Feb 06 '18 at 21:42

An idea is to rotate the container and apply the inverse rotation to the image like this:

.about__image {
  margin: 4rem;
  width: 27rem;
  height: 27rem;
  float: left;
  -webkit-shape-outside: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  position: relative;
  background-image: radial-gradient(at left top, red 25%, blue 55%);
  transition:1s;
}

.about__photo {
  position: absolute;
  margin: 1rem;
  width: 25rem;
  height: 25rem;
  float: left;
  -webkit-shape-outside: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  transition:1s;
}

div:hover .about__image{
 transform:rotate(180deg);
}
div:hover .about__photo{
 transform:rotate(-180deg);
}

div {
  height: 600px;
  width: 100vw;
  background: #eee;
}

<div>
<figure class="about__image">
  <img src="https://lorempixel.com/200/200/" class="about__photo">
</figure>
</div>

Rotate Parent but not child on hover

1 Answers1