Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Mladen Milic
Mladen Milic
9,913 Points
Posted by Mladen Milic
Mladen Milic
9,913 Points

CSS Problem For Job Interview

Guys I have a task for the job interview:

create a website what looks like this 2 squares. The green square contains the red square... If I hover the mouse cursor over the red area rotate the green area by 70degrees.

The red area has to has a fixed state (can not turn) all the time.

Can somebody please help?

2 Answers

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Hi Mladen,

Here's one of many solutions for that problem.

html

<body>
  <div id="red">&nbsp;</div>
  <div id="green">&nbsp;</div>  
</body>

css

body{
  padding: 50px;
  position: relative;
  top: 0px;
  left: 0px;
}

div {
  border: 1px solid black;
}

#green{
  width: 100px;
  height: 100px;
  background-color: green;
  position: relative;
}

#red {
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 1;
  position: absolute;
}

 #red:hover + #green{
transform: rotate(70deg);
}

Again there are so many ways to achieve this. :)

Hope this helps!

Cheers!

Owa

Mladen Milic
Mladen Milic
9,913 Points
Mladen Milic
Mladen Milic
9,913 Points

I like it both thanks